<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Markmap</title>
<style>
* {
  margin: 0;
  padding: 0;
}
html {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
#mindmap {
  display: block;
  width: 100vw;
  height: 100vh;
}
.markmap-dark {
  background: #27272a;
  color: white;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/style.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.11.1/styles/default.min.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.18.12/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/index.js"></script><script>(r => {
              setTimeout(r);
            })(function renderToolbar() {
  const {
    markmap,
    mm
  } = window;
  const {
    el
  } = markmap.Toolbar.create(mm);
  el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
  document.body.append(el);
})</script><script>((getMarkmap, getOptions, root2, jsonOptions) => {
              const markmap = getMarkmap();
              window.mm = markmap.Markmap.create(
                "svg#mindmap",
                (getOptions || markmap.deriveOptions)({initialExpandLevel: 1}),
                root2
              );
              if (window.matchMedia("(prefers-color-scheme: light)").matches) {
                document.documentElement.classList.add("markmap-light");
              }
            })(() => window.markmap,null,{"content":"css &#x77e5;&#x8bc6;&#x70b9;","children":[{"content":"&#x76d2;&#x6a21;&#x578b;","children":[{"content":"CSS &#x663e;&#x793a;&#x7684;&#x6240;&#x6709;&#x4e1c;&#x897f;&#x90fd;&#x662f;&#x4e00;&#x4e2a;&#x76d2;&#x5b50;&#xff0c;&#x5373;&#x4f7f;&#x5b83;&#x53ea;&#x662f;&#x4e00;&#x4e9b;&#x6587;&#x672c;&#xff0c;&#x6216;&#x8005;&#x6709;&#x4e00;&#x4e2a;&#x8ba9;&#x5b83;&#x770b;&#x8d77;&#x6765;&#x50cf;&#x5706;&#x5f62;&#x7684; border-radius","children":[],"payload":{"tag":"h3","lines":"4,5"}},{"content":"&#x6807;&#x51c6;&#x76d2;&#x6a21;&#x578b;&#x548c;IE&#x76d2;&#x6a21;&#x578b;","children":[{"content":"box-sizing","children":[{"content":"<pre data-lines=\"9,20\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x4f7f;&#x7528;&#x6807;&#x51c6;&#x76d2;&#x6a21;&#x578b; */</span>\n<span class=\"hljs-selector-class\">.element</span> {\n    <span class=\"hljs-attribute\">box-sizing</span>: content-box; <span class=\"hljs-comment\">/* &#x9ed8;&#x8ba4;&#x503c; */</span>\n}\n\n<span class=\"hljs-comment\">/* &#x4f7f;&#x7528;IE/&#x602a;&#x5f02;&#x76d2;&#x6a21;&#x578b; */</span>\n<span class=\"hljs-selector-class\">.element</span> {\n    <span class=\"hljs-attribute\">box-sizing</span>: border-box;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"9,20"}}],"payload":{"tag":"h4","lines":"8,9"}},{"content":"&#x6807;&#x51c6;&#x76d2;&#x6a21;&#x578b;","children":[{"content":"<pre data-lines=\"21,22\"><code>&#x5f53;&#x4f60;&#x8bbe;&#x7f6e;&#x4e00;&#x4e2a;&#x5143;&#x7d20;&#x7684;&#x5bbd;&#x5ea6;&#x4e3a;300px&#xff0c;&#x7136;&#x540e;&#x53c8;&#x6dfb;&#x52a0;&#x4e86;20px&#x7684;&#x5185;&#x8fb9;&#x8ddd;&#x548c;10px&#x7684;&#x8fb9;&#x6846;&#x65f6;&#xff0c;&#x8be5;&#x5143;&#x7d20;&#x5728;&#x9875;&#x9762;&#x4e0a;&#x5b9e;&#x9645;&#x5360;&#x636e;&#x7684;&#x5bbd;&#x5ea6;&#x4f1a;&#x662f; 300px + 40px (&#x5de6;&#x53f3;padding) + 20px (&#x5de6;&#x53f3;border) = 360px&#x3002;&#x8fd9;&#x6709;&#x65f6;&#x4f1a;&#x5bfc;&#x81f4;&#x5e03;&#x5c40;&#x8ba1;&#x7b97;&#x590d;&#x6742;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"21,22"}}],"payload":{"tag":"h4","lines":"20,21"}},{"content":"IE&#x76d2;&#x6a21;&#x578b;","children":[{"content":"<pre data-lines=\"23,24\"><code>&#x5f53;&#x4f60;&#x8bbe;&#x7f6e;&#x4e00;&#x4e2a;&#x5143;&#x7d20;&#x7684;&#x5bbd;&#x5ea6;&#x4e3a;300px&#xff0c;&#x65e0;&#x8bba;&#x4f60;&#x5982;&#x4f55;&#x589e;&#x52a0;&#x5185;&#x8fb9;&#x8ddd;&#x6216;&#x8fb9;&#x6846;&#xff0c;&#x5b83;&#x5728;&#x9875;&#x9762;&#x4e0a;&#x5360;&#x636e;&#x7684;&#x5bbd;&#x5ea6;&#x59cb;&#x7ec8;&#x662f;300px&#xff08;&#x4e0d;&#x5305;&#x62ec;&#x5916;&#x8fb9;&#x8ddd;&#xff09;&#x3002;&#x5185;&#x5bb9;&#x533a;&#x57df;&#x7684;&#x5bbd;&#x5ea6;&#x4f1a;&#x81ea;&#x52a8;&#x51cf;&#x5c0f;&#x4ee5;&#x9002;&#x5e94;&#x8bbe;&#x5b9a;&#x7684;&#x603b;&#x5bbd;&#x5ea6;&#x3002;&#x8fd9;&#x79cd;&#x6a21;&#x578b;&#x5728;&#x8fdb;&#x884c;&#x54cd;&#x5e94;&#x5f0f;&#x5e03;&#x5c40;&#x548c;&#x7f51;&#x683c;&#x7cfb;&#x7edf;&#x8bbe;&#x8ba1;&#x65f6;&#x66f4;&#x4e3a;&#x65b9;&#x4fbf;&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"23,24"}}],"payload":{"tag":"h4","lines":"22,23"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"<pre data-lines=\"25,30\"><code class=\"language-css\">*, *<span class=\"hljs-selector-pseudo\">::before</span>, *<span class=\"hljs-selector-pseudo\">::after</span> {\n  <span class=\"hljs-attribute\">box-sizing</span>: border-box;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"25,30"}}],"payload":{"tag":"h4","lines":"24,25"}}],"payload":{"tag":"h3","lines":"6,7"}},{"content":"&#x76d2;&#x6a21;&#x578b;&#x5c3a;&#x5bf8;","children":[{"content":"&#x5185;&#x90e8;&#x51b3;&#x5b9a;&#x5c3a;&#x5bf8;","children":[{"content":"<pre data-lines=\"32,33\"><code>&#x8ba9;&#x6d4f;&#x89c8;&#x5668;&#x6839;&#x636e;&#x5185;&#x5bb9;&#x7684;&#x5927;&#x5c0f;&#x505a;&#x51fa;&#x51b3;&#x5b9a;&#x3002; &#x5185;&#x90e8;&#x5c3a;&#x5bf8;&#x662f;&#x6d4f;&#x89c8;&#x5668;&#x7684;&#x9ed8;&#x8ba4;&#x884c;&#x4e3a;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"32,33"}},{"content":"<pre data-lines=\"33,43\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.intrinsic-sizing</span> {\n    <span class=\"hljs-comment\">/* &#x5143;&#x7d20;&#x4f1a;&#x6839;&#x636e;&#x5176;&#x5185;&#x5bb9;&#x81ea;&#x52a8;&#x8c03;&#x6574;&#x5927;&#x5c0f; */</span>\n    <span class=\"hljs-attribute\">width</span>: min-content;   <span class=\"hljs-comment\">/* &#x91c7;&#x7528;&#x5185;&#x5bb9;&#x7684;&#x6700;&#x5c0f;&#x5bbd;&#x5ea6; */</span>\n    <span class=\"hljs-attribute\">width</span>: max-content;   <span class=\"hljs-comment\">/* &#x91c7;&#x7528;&#x5185;&#x5bb9;&#x7684;&#x6700;&#x5927;&#x5bbd;&#x5ea6; */</span>\n    <span class=\"hljs-attribute\">width</span>: fit-content;   <span class=\"hljs-comment\">/* &#x4ecb;&#x4e8e;min-content&#x548c;max-content&#x4e4b;&#x95f4;&#xff0c;&#x4f46;&#x4e0d;&#x8d85;&#x8fc7;&#x53ef;&#x7528;&#x7a7a;&#x95f4; */</span>\n    <span class=\"hljs-comment\">/* &#x81ea;&#x52a8;&#x5927;&#x5c0f; */</span>\n    <span class=\"hljs-attribute\">width</span>: auto;          <span class=\"hljs-comment\">/* &#x9ed8;&#x8ba4;&#x503c;&#xff0c;&#x6839;&#x636e;&#x4e0a;&#x4e0b;&#x6587;&#x81ea;&#x52a8;&#x8ba1;&#x7b97; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"33,43"}}],"payload":{"tag":"h4","lines":"31,32"}},{"content":"&#x5916;&#x90e8;&#x51b3;&#x5b9a;&#x5c3a;&#x5bf8;","children":[{"content":"<pre data-lines=\"44,45\"><code>&#x5143;&#x7d20;&#x7684;&#x5b9e;&#x9645;&#x5927;&#x5c0f;&#x53d7;&#x76d2;&#x6a21;&#x578b;&#x5f71;&#x54cd;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"44,45"}},{"content":"<pre data-lines=\"45,62\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.box-sizing</span> {\n  <span class=\"hljs-comment\">/* &#x9ed8;&#x8ba4;&#x76d2;&#x6a21;&#x578b;&#xff1a;width/height&#x53ea;&#x5305;&#x62ec;&#x5185;&#x5bb9;&#x533a;&#x57df; */</span>\n  <span class=\"hljs-attribute\">box-sizing</span>: content-box;\n  <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">300px</span>;\n  <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">20px</span>;\n  <span class=\"hljs-attribute\">border</span>: <span class=\"hljs-number\">5px</span> solid black;\n  <span class=\"hljs-comment\">/* &#x603b;&#x5bbd;&#x5ea6; = 300px + 20px*2 + 5px*2 = 350px */</span>\n\n  <span class=\"hljs-comment\">/* &#x66ff;&#x4ee3;&#x76d2;&#x6a21;&#x578b;&#xff1a;width/height&#x5305;&#x62ec;&#x5185;&#x5bb9;&#x3001;&#x5185;&#x8fb9;&#x8ddd;&#x548c;&#x8fb9;&#x6846; */</span>\n  <span class=\"hljs-attribute\">box-sizing</span>: border-box;\n  <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">300px</span>;\n  <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">20px</span>;\n  <span class=\"hljs-attribute\">border</span>: <span class=\"hljs-number\">5px</span> solid black;\n  <span class=\"hljs-comment\">/* &#x603b;&#x5bbd;&#x5ea6; = 300px&#xff08;&#x5185;&#x5bb9;&#x533a;&#x57df;&#x4f1a;&#x81ea;&#x52a8;&#x7f29;&#x5c0f;&#xff09; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"45,62"}}],"payload":{"tag":"h4","lines":"43,44"}}],"payload":{"tag":"h3","lines":"30,31"}},{"content":"&#x76d2;&#x6a21;&#x578b;&#x7684;&#x5404;&#x4e2a;&#x533a;&#x57df;","children":[{"content":"<img src=\"a-diagram-showing-four-m-af72960a9e79a.svg\" alt=\"alt text\">","children":[{"content":"<pre data-lines=\"65,66\"><code>&#x80cc;&#x666f;&#x4f1a;&#x51fa;&#x73b0;&#x5728;paddding&#x91cc;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"65,66"}}],"payload":{"tag":"h4","lines":"64,65"}}],"payload":{"tag":"h3","lines":"62,63"}}],"payload":{"tag":"h2","lines":"2,3"}},{"content":"&#x9009;&#x62e9;&#x5668;","children":[{"content":"&#x9009;&#x62e9;&#x5668;&#x7684;&#x76ee;&#x7684;&#x662f;&#x7528;&#x6765;&#x5b9a;&#x4f4d;html&#x5143;&#x7d20;,&#x5b9a;&#x4f4d;&#x4e4b;&#x540e;&#x624d;&#x80fd;&#x65bd;&#x52a0;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"h3","lines":"69,70"}},{"content":"&#x7b80;&#x5355;&#x9009;&#x62e9;&#x5668;","children":[{"content":"<pre data-lines=\"72,78\"><code>- &#x901a;&#x914d;&#x7b26;&#x9009;&#x62e9;&#x5668;\n- &#x5143;&#x7d20;&#x9009;&#x62e9;&#x5668;\n- &#x7c7b;&#x9009;&#x62e9;&#x5668;\n- ID &#x9009;&#x62e9;&#x5668;\n- &#x5c5e;&#x6027;&#x9009;&#x62e9;&#x5668;\n- &#x4e00;&#x7ec4;&#x89c4;&#x5219;&#x53ef;&#x4ee5;&#x6709;&#x591a;&#x4e2a;&#x9009;&#x62e9;&#x5668;,&#x901a;&#x8fc7;&#x9017;&#x53f7;&#x5206;&#x5272;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"72,78"}}],"payload":{"tag":"h3","lines":"71,72"}},{"content":"&#x4f2a;&#x7c7b;&#x548c;&#x4f2a;&#x5143;&#x7d20;","children":[{"content":"<a href=\"https://developer.mozilla.org/zh-CN/docs/\">&#x4f2a;&#x7c7b;</a>","children":[{"content":"HTML &#x5143;&#x7d20;&#x4f1a;&#x5904;&#x4e8e;&#x5404;&#x79cd;&#x4e0d;&#x540c;&#x7684;&#x72b6;&#x6001;&#xff0c;&#x53ef;&#x80fd;&#x662f;&#x7531;&#x4e8e;&#x4e0e;&#x4e4b;&#x4ea4;&#x4e92;&#xff0c;&#x6216;&#x8005;&#x5b83;&#x7684;&#x67d0;&#x4e2a;&#x5b50;&#x5143;&#x7d20;&#x5904;&#x4e8e;&#x67d0;&#x79cd;&#x72b6;&#x6001; &#x6bd4;&#x5982;  :hover :nth-child","children":[],"payload":{"tag":"h5","lines":"82,83"}},{"content":"1.&#x54cd;&#x5e94;&#x7528;&#x6237;&#x4ea4;&#x4e92;&#xff08;:hover, :focus&#xff09;","children":[],"payload":{"tag":"h5","lines":"83,84"}},{"content":"2.&#x6839;&#x636e;&#x5143;&#x7d20;&#x72b6;&#x6001;&#x8bbe;&#x7f6e;&#x6837;&#x5f0f;&#xff08;:checked, :disabled, :valid&#xff09;","children":[],"payload":{"tag":"h5","lines":"84,85"}},{"content":"3.&#x57fa;&#x4e8e;&#x5143;&#x7d20;&#x5728;&#x6587;&#x6863;&#x4e2d;&#x7684;&#x4f4d;&#x7f6e;&#x9009;&#x62e9;&#x5143;&#x7d20;&#xff08;:nth-child, :first-of-type&#xff09;","children":[],"payload":{"tag":"h5","lines":"85,86"}},{"content":"4.&#x5b9e;&#x73b0;&#x590d;&#x6742;&#x7684;&#x903b;&#x8f91;&#x9009;&#x62e9;&#xff08;:not(), :has()&#xff09;","children":[],"payload":{"tag":"h5","lines":"86,87"}},{"content":"5.&#x6587;&#x6863;&#x7ed3;&#x6784;&#x4f2a;&#x7c7b;","children":[{"content":":root &#x4f2a;&#x7c7b;","children":[{"content":"&#x5339;&#x914d;&#x6587;&#x6863;&#x7684;&#x6839;&#x5143;&#x7d20;&#xff0c;&#x5728;HTML&#x4e2d;&#x5c31;&#x662f;<code>&lt;html&gt;</code>&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"89,90"}},{"content":"&#x5e38;&#x7528;&#x4e8e;&#x5b9a;&#x4e49;&#x5168;&#x5c40;CSS&#x53d8;&#x91cf;&#xff08;&#x81ea;&#x5b9a;&#x4e49;&#x5c5e;&#x6027;&#xff09;","children":[],"payload":{"tag":"li","lines":"90,91"}},{"content":"&#x4f18;&#x5148;&#x7ea7;&#x9ad8;&#x4e8e;&#x76f4;&#x63a5;&#x4f7f;&#x7528;html&#x9009;&#x62e9;&#x5668;","children":[],"payload":{"tag":"li","lines":"91,92"}},{"content":"&#x793a;&#x4f8b;&#xff1a;<pre data-lines=\"93,101\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--primary-color</span>: <span class=\"hljs-number\">#3498db</span>;\n  <span class=\"hljs-attr\">--font-size-base</span>: <span class=\"hljs-number\">16px</span>;\n  <span class=\"hljs-attr\">--spacing-unit</span>: <span class=\"hljs-number\">8px</span>;\n  <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-number\">62.5%</span>; <span class=\"hljs-comment\">/* &#x8bbe;&#x7f6e;&#x6839;&#x5143;&#x7d20;&#x5b57;&#x4f53;&#x5927;&#x5c0f;&#xff0c;&#x4f7f;1rem=10px */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"92,101"}},{"content":"&#x4e0e;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x7ed3;&#x5408;&#x5b9e;&#x73b0;&#x4e3b;&#x9898;&#x5207;&#x6362;&#xff1a;<pre data-lines=\"102,115\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--text-color</span>: <span class=\"hljs-number\">#333</span>;\n  <span class=\"hljs-attr\">--bg-color</span>: <span class=\"hljs-number\">#fff</span>;\n}\n\n<span class=\"hljs-keyword\">@media</span> (<span class=\"hljs-attribute\">prefers-color-scheme</span>: dark) {\n  <span class=\"hljs-selector-pseudo\">:root</span> {\n    <span class=\"hljs-attr\">--text-color</span>: <span class=\"hljs-number\">#eee</span>;\n    <span class=\"hljs-attr\">--bg-color</span>: <span class=\"hljs-number\">#222</span>;\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"101,116"}}],"payload":{"tag":"h6","lines":"88,89"}},{"content":":empty &#x4f2a;&#x7c7b;","children":[{"content":"&#x9009;&#x62e9;&#x6ca1;&#x6709;&#x5b50;&#x5143;&#x7d20;&#x7684;&#x5143;&#x7d20;&#xff08;&#x5305;&#x62ec;&#x6587;&#x672c;&#x8282;&#x70b9;&#xff09;","children":[],"payload":{"tag":"li","lines":"117,118"}},{"content":"&#x5e38;&#x7528;&#x4e8e;&#x5904;&#x7406;&#x7a7a;&#x5bb9;&#x5668;&#x7684;&#x663e;&#x793a;/&#x9690;&#x85cf;","children":[],"payload":{"tag":"li","lines":"118,119"}},{"content":"&#x793a;&#x4f8b;&#xff1a;<pre data-lines=\"120,130\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.card</span><span class=\"hljs-selector-pseudo\">:empty</span> {\n  <span class=\"hljs-attribute\">display</span>: none; <span class=\"hljs-comment\">/* &#x9690;&#x85cf;&#x7a7a;&#x5361;&#x7247; */</span>\n}\n\n<span class=\"hljs-selector-class\">.placeholder</span><span class=\"hljs-selector-pseudo\">:empty</span><span class=\"hljs-selector-pseudo\">::before</span> {\n  <span class=\"hljs-attribute\">content</span>: <span class=\"hljs-string\">&quot;&#x6682;&#x65e0;&#x6570;&#x636e;&quot;</span>;\n  <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-number\">#999</span>;\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"119,131"}}],"payload":{"tag":"h6","lines":"116,117"}},{"content":":lang() &#x4f2a;&#x7c7b;","children":[{"content":"&#x57fa;&#x4e8e;&#x5143;&#x7d20;&#x7684;&#x8bed;&#x8a00;&#x9009;&#x62e9;&#x5143;&#x7d20;&#xff08;&#x7531;lang&#x5c5e;&#x6027;&#x6216;&#x6587;&#x6863;&#x8bed;&#x8a00;&#x51b3;&#x5b9a;&#xff09;","children":[],"payload":{"tag":"li","lines":"132,133"}},{"content":"&#x7528;&#x4e8e;&#x9488;&#x5bf9;&#x7279;&#x5b9a;&#x8bed;&#x8a00;&#x5e94;&#x7528;&#x4e0d;&#x540c;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"133,134"}},{"content":"&#x793a;&#x4f8b;&#xff1a;<pre data-lines=\"135,144\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:lang</span>(zh) {\n  <span class=\"hljs-attribute\">font-family</span>: <span class=\"hljs-string\">&quot;Microsoft YaHei&quot;</span>, sans-serif;\n}\n\n<span class=\"hljs-selector-pseudo\">:lang</span>(ja) <span class=\"hljs-selector-tag\">q</span> {\n  <span class=\"hljs-attribute\">quotes</span>: <span class=\"hljs-string\">&quot;&#x300c;&quot;</span> <span class=\"hljs-string\">&quot;&#x300d;&quot;</span>; <span class=\"hljs-comment\">/* &#x65e5;&#x8bed;&#x5f15;&#x53f7;&#x6837;&#x5f0f; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"134,145"}}],"payload":{"tag":"h6","lines":"131,132"}},{"content":":scope &#x4f2a;&#x7c7b;","children":[{"content":"&#x8868;&#x793a;&#x4f5c;&#x4e3a;&#x5339;&#x914d;&#x5143;&#x7d20;&#x7684;&#x53c2;&#x8003;&#x70b9;&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"146,147"}},{"content":"&#x5728;CSS&#x4e2d;&#x901a;&#x5e38;&#x7b49;&#x540c;&#x4e8e;:root","children":[],"payload":{"tag":"li","lines":"147,148"}},{"content":"&#x5728;JavaScript&#x7684;querySelector&#x7b49;&#x65b9;&#x6cd5;&#x4e2d;&#x66f4;&#x6709;&#x7528;","children":[],"payload":{"tag":"li","lines":"148,149"}},{"content":"&#x793a;&#x4f8b;&#xff1a;<pre data-lines=\"150,160\"><code class=\"language-css\">/* &#x5728;CSS&#x4e2d; */\n:scope &gt; .direct-child {\n  margin-top: 1em;\n}\n\n/* &#x5728;JavaScript&#x4e2d; */\n// element.querySelectorAll(&apos;:scope &gt; div&apos;)\n// &#x9009;&#x62e9;element&#x7684;&#x76f4;&#x63a5;&#x5b50;div&#x5143;&#x7d20;\n</code></pre>","children":[],"payload":{"tag":"li","lines":"149,161"}}],"payload":{"tag":"h6","lines":"145,146"}},{"content":":target &#x4f2a;&#x7c7b;","children":[{"content":"&#x5339;&#x914d;&#x5f53;&#x524d;URL&#x7247;&#x6bb5;&#x6807;&#x8bc6;&#x7b26;&#x6307;&#x5411;&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"162,163"}},{"content":"&#x7528;&#x4e8e;&#x7a81;&#x51fa;&#x663e;&#x793a;&#x9875;&#x9762;&#x5185;&#x5bfc;&#x822a;&#x7684;&#x76ee;&#x6807;","children":[],"payload":{"tag":"li","lines":"163,164"}},{"content":"&#x793a;&#x4f8b;&#xff1a;<pre data-lines=\"165,177\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x5f53;URL&#x4e3a;example.com#section1&#x65f6;&#xff0c;#section1&#x5143;&#x7d20;&#x4f1a;&#x5339;&#x914d;&#x6b64;&#x6837;&#x5f0f; */</span>\n<span class=\"hljs-selector-pseudo\">:target</span> {\n  <span class=\"hljs-attribute\">background-color</span>: <span class=\"hljs-number\">#ffffd0</span>;\n  <span class=\"hljs-attribute\">transition</span>: background-color <span class=\"hljs-number\">0.5s</span>;\n}\n\n<span class=\"hljs-comment\">/* &#x521b;&#x5efa;&#x5e73;&#x6ed1;&#x6eda;&#x52a8;&#x5230;&#x76ee;&#x6807;&#x7684;&#x6548;&#x679c; */</span>\n<span class=\"hljs-selector-pseudo\">:target</span> {\n  <span class=\"hljs-attribute\">scroll-margin-top</span>: <span class=\"hljs-number\">2em</span>;\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"164,178"}}],"payload":{"tag":"h6","lines":"161,162"}},{"content":":defined &#x4f2a;&#x7c7b;","children":[{"content":"&#x5339;&#x914d;&#x4efb;&#x4f55;&#x5df2;&#x5b9a;&#x4e49;&#x7684;&#x5143;&#x7d20;&#xff08;&#x5305;&#x62ec;&#x6807;&#x51c6;HTML&#x5143;&#x7d20;&#x548c;&#x5df2;&#x6ce8;&#x518c;&#x7684;&#x81ea;&#x5b9a;&#x4e49;&#x5143;&#x7d20;&#xff09;","children":[],"payload":{"tag":"li","lines":"179,180"}},{"content":"&#x7528;&#x4e8e;&#x5904;&#x7406;&#x81ea;&#x5b9a;&#x4e49;&#x5143;&#x7d20;&#x5728;&#x5b9a;&#x4e49;&#x524d;&#x540e;&#x7684;&#x6837;&#x5f0f;&#x5dee;&#x5f02;","children":[],"payload":{"tag":"li","lines":"180,181"}},{"content":"&#x793a;&#x4f8b;&#xff1a;<pre data-lines=\"182,195\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x672a;&#x5b9a;&#x4e49;&#x7684;&#x81ea;&#x5b9a;&#x4e49;&#x5143;&#x7d20;&#x9ed8;&#x8ba4;&#x662f;inline */</span>\nmy-custom-element<span class=\"hljs-selector-pseudo\">:not</span>(<span class=\"hljs-selector-pseudo\">:defined</span>) {\n  <span class=\"hljs-attribute\">display</span>: block;\n  <span class=\"hljs-attribute\">height</span>: <span class=\"hljs-number\">100px</span>;\n  <span class=\"hljs-attribute\">background</span>: <span class=\"hljs-number\">#eee</span>;\n}\n\n<span class=\"hljs-comment\">/* &#x5b9a;&#x4e49;&#x540e;&#x7684;&#x6837;&#x5f0f; */</span>\nmy-custom-element<span class=\"hljs-selector-pseudo\">:defined</span> {\n  <span class=\"hljs-attribute\">display</span>: grid;\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"181,196"}}],"payload":{"tag":"h6","lines":"178,179"}}],"payload":{"tag":"h5","lines":"87,88"}}],"payload":{"tag":"h4","lines":"80,81"}},{"content":"<a href=\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements\">&#x4f2a;&#x5143;&#x7d20;</a>","children":[{"content":"&#x201c;&#x4f2a;&#x5143;&#x7d20;&#x201d;&#xff08;Pseudo-elements&#xff09;&#x662f; CSS &#x4e2d;&#x4e00;&#x7c7b;&#x7279;&#x6b8a;&#x7684;&#x9009;&#x62e9;&#x5668;&#xff0c;&#x5b83;&#x4e0d;&#x662f;&#x9009;&#x62e9;&#x771f;&#x5b9e;&#x7684; DOM &#x5143;&#x7d20;&#xff0c;&#x800c;&#x662f;&#x9009;&#x62e9;&#x5143;&#x7d20;&#x7684;&#x67d0;&#x4e2a;&#x201c;&#x865a;&#x62df;&#x90e8;&#x5206;&#x201d;&#x6216;&#x201c;&#x751f;&#x6210;&#x7684;&#x5185;&#x5bb9;&#x201d;.&#x6bd4;&#x5982;&#x6bb5;&#x843d;&#x7684;&#x7b2c;&#x4e00;&#x884c;&#x3001;&#x7b2c;&#x4e00;&#x4e2a;&#x5b57;&#x6bcd;&#x3001;&#x5143;&#x7d20;&#x524d;&#x540e;&#x63d2;&#x5165;&#x7684;&#x5185;&#x5bb9;&#x3001;&#x6216;&#x5143;&#x7d20;&#x5185;&#x90e8;&#x7684;&#x7279;&#x5b9a;&#x533a;&#x57df;&#x3002;&#x4f2a;&#x5143;&#x7d20;&#x4f7f;&#x7528;&#x53cc;&#x5192;&#x53f7; :: &#x8bed;&#x6cd5;&#xff08;&#x73b0;&#x4ee3;&#x6807;&#x51c6;&#xff09;&#xff0c;&#x4f46;&#x4e3a;&#x4e86;&#x517c;&#x5bb9;&#x65e7;&#x7248;&#xff0c;&#x90e8;&#x5206;&#x4f2a;&#x5143;&#x7d20;&#x4e5f;&#x652f;&#x6301;&#x5355;&#x5192;&#x53f7; :&#xff08;&#x5982; :before, :after&#xff09;&#x3002;","children":[],"payload":{"tag":"h5","lines":"197,198"}}],"payload":{"tag":"h4","lines":"196,197"}},{"content":"&#x6bd4;&#x8f83;","children":[{"content":"<table data-lines=\"201,208\">\n<thead data-lines=\"201,202\">\n<tr data-lines=\"201,202\">\n<th>&#x7279;&#x6027;</th>\n<th>&#x4f2a;&#x7c7b;&#xff08;Pseudo-classes&#xff09;</th>\n<th>&#x4f2a;&#x5143;&#x7d20;&#xff08;Pseudo-elements&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"203,208\">\n<tr data-lines=\"203,204\">\n<td>&#x8bed;&#x6cd5;</td>\n<td>&#x5355;&#x5192;&#x53f7; :hover, :nth-child()</td>\n<td>&#x53cc;&#x5192;&#x53f7; ::before, ::first-line&#xff08;&#x63a8;&#x8350;&#xff09;</td>\n</tr>\n<tr data-lines=\"204,205\">\n<td>&#x9009;&#x62e9;&#x5bf9;&#x8c61;</td>\n<td>&#x5143;&#x7d20;&#x7684;&#x72b6;&#x6001;&#x6216;&#x4f4d;&#x7f6e;</td>\n<td>&#x5143;&#x7d20;&#x7684;&#x865a;&#x62df;&#x5b50;&#x90e8;&#x5206;&#x6216;&#x751f;&#x6210;&#x5185;&#x5bb9;</td>\n</tr>\n<tr data-lines=\"205,206\">\n<td>&#x6570;&#x91cf;</td>\n<td>&#x4e00;&#x4e2a;&#x5143;&#x7d20;&#x53ef;&#x5339;&#x914d;&#x591a;&#x4e2a;&#x4f2a;&#x7c7b;</td>\n<td>&#x4e00;&#x4e2a;&#x5143;&#x7d20;&#x53ea;&#x80fd;&#x6709;&#x4e00;&#x4e2a;&#x7279;&#x5b9a;&#x4f2a;&#x5143;&#x7d20;</td>\n</tr>\n<tr data-lines=\"206,207\">\n<td>&#x662f;&#x5426;&#x751f;&#x6210;&#x5185;&#x5bb9;</td>\n<td>&#x5426;</td>\n<td>::before/::after &#x9700;&#x8981; content &#x751f;&#x6210;&#x5185;&#x5bb9;</td>\n</tr>\n<tr data-lines=\"207,208\">\n<td>&#x662f;&#x5426;&#x5728; DOM &#x4e2d;</td>\n<td>&#x5426;&#xff08;&#x72b6;&#x6001;&#xff09;</td>\n<td>&#x5426;&#xff08;&#x865a;&#x62df;&#x8282;&#x70b9;&#xff09;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"201,208"}}],"payload":{"tag":"h4","lines":"199,200"}}],"payload":{"tag":"h3","lines":"78,79"}},{"content":"&#x590d;&#x6742;&#x9009;&#x62e9;&#x5668;","children":[{"content":"&#x7ec4;&#x5408;&#x9009;&#x62e9;&#x5668;","children":[{"content":"\n<p data-lines=\"213,214\"><strong>&#x540e;&#x4ee3;&#x9009;&#x62e9;&#x5668;</strong>&#xff08;&#x7a7a;&#x683c;&#xff09;&#xff1a;&#x9009;&#x62e9;&#x5143;&#x7d20;&#x5185;&#x90e8;&#x7684;&#x6240;&#x6709;&#x5339;&#x914d;&#x5143;&#x7d20;&#xff0c;&#x65e0;&#x8bba;&#x5d4c;&#x5957;&#x591a;&#x6df1;</p>\n<pre data-lines=\"214,217\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">div</span> <span class=\"hljs-selector-tag\">p</span> { <span class=\"hljs-attribute\">color</span>: red; } <span class=\"hljs-comment\">/* div &#x5185;&#x7684;&#x6240;&#x6709; p &#x5143;&#x7d20; */</span>\n</code></pre>","children":[],"payload":{"tag":"li","lines":"213,218"}},{"content":"\n<p data-lines=\"218,219\"><strong>&#x5b50;&#x9009;&#x62e9;&#x5668;</strong>&#xff08;&gt;&#xff09;&#xff1a;&#x53ea;&#x9009;&#x62e9;&#x76f4;&#x63a5;&#x5b50;&#x5143;&#x7d20;</p>\n<pre data-lines=\"219,222\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">div</span> &gt; <span class=\"hljs-selector-tag\">p</span> { <span class=\"hljs-attribute\">color</span>: blue; } <span class=\"hljs-comment\">/* &#x53ea;&#x9009;&#x62e9; div &#x7684;&#x76f4;&#x63a5;&#x5b50;&#x5143;&#x7d20; p */</span>\n</code></pre>","children":[],"payload":{"tag":"li","lines":"218,223"}},{"content":"\n<p data-lines=\"223,224\"><strong>&#x76f8;&#x90bb;&#x5144;&#x5f1f;&#x9009;&#x62e9;&#x5668;</strong>&#xff08;+&#xff09;&#xff1a;&#x9009;&#x62e9;&#x7d27;&#x63a5;&#x5728;&#x53e6;&#x4e00;&#x5143;&#x7d20;&#x540e;&#x7684;&#x5143;&#x7d20;</p>\n<pre data-lines=\"224,227\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">h2</span> + <span class=\"hljs-selector-tag\">p</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">0</span>; } <span class=\"hljs-comment\">/* &#x7d27;&#x8ddf;&#x5728; h2 &#x540e;&#x9762;&#x7684;&#x7b2c;&#x4e00;&#x4e2a; p &#x5143;&#x7d20; */</span>\n</code></pre>","children":[],"payload":{"tag":"li","lines":"223,228"}},{"content":"\n<p data-lines=\"228,229\"><strong>&#x901a;&#x7528;&#x5144;&#x5f1f;&#x9009;&#x62e9;&#x5668;</strong>&#xff08;~&#xff09;&#xff1a;&#x9009;&#x62e9;&#x540c;&#x4e00;&#x7236;&#x5143;&#x7d20;&#x4e0b;&#xff0c;&#x6307;&#x5b9a;&#x5143;&#x7d20;&#x4e4b;&#x540e;&#x7684;&#x6240;&#x6709;&#x5144;&#x5f1f;&#x5143;&#x7d20;</p>\n<pre data-lines=\"229,232\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">h2</span> ~ <span class=\"hljs-selector-tag\">p</span> { <span class=\"hljs-attribute\">color</span>: green; } <span class=\"hljs-comment\">/* h2 &#x540e;&#x9762;&#x7684;&#x6240;&#x6709; p &#x5144;&#x5f1f;&#x5143;&#x7d20; */</span>\n</code></pre>","children":[],"payload":{"tag":"li","lines":"228,233"}}],"payload":{"tag":"h4","lines":"212,213"}},{"content":"&#x590d;&#x5408;&#x9009;&#x62e9;&#x5668;","children":[{"content":"\n<p data-lines=\"234,235\"><strong>&#x5143;&#x7d20;&#x7c7b;&#x578b;&#x4e0e;&#x7c7b;&#x7ed3;&#x5408;</strong>&#xff1a;</p>\n<pre data-lines=\"235,238\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">p</span><span class=\"hljs-selector-class\">.special</span> { <span class=\"hljs-attribute\">font-weight</span>: bold; } <span class=\"hljs-comment\">/* &#x540c;&#x65f6;&#x662f; p &#x5143;&#x7d20;&#x4e14;&#x6709; special &#x7c7b; */</span>\n</code></pre>","children":[],"payload":{"tag":"li","lines":"234,239"}},{"content":"\n<p data-lines=\"239,240\"><strong>&#x591a;&#x7c7b;&#x9009;&#x62e9;&#x5668;</strong>&#xff1a;</p>\n<pre data-lines=\"240,243\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.important</span><span class=\"hljs-selector-class\">.warning</span> { <span class=\"hljs-attribute\">background</span>: yellow; } <span class=\"hljs-comment\">/* &#x540c;&#x65f6;&#x5177;&#x6709; important &#x548c; warning &#x7c7b; */</span>\n</code></pre>","children":[],"payload":{"tag":"li","lines":"239,244"}},{"content":"\n<p data-lines=\"244,245\"><strong>&#x5c5e;&#x6027;&#x9009;&#x62e9;&#x5668;&#x7684;&#x9ad8;&#x7ea7;&#x7528;&#x6cd5;</strong>&#xff1a;</p>\n<pre data-lines=\"245,258\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x7cbe;&#x786e;&#x5339;&#x914d; */</span>\n<span class=\"hljs-selector-attr\">[type=<span class=\"hljs-string\">&quot;text&quot;</span>]</span> { <span class=\"hljs-attribute\">border</span>: <span class=\"hljs-number\">1px</span> solid gray; }\n\n<span class=\"hljs-comment\">/* &#x5f00;&#x5934;&#x5339;&#x914d; */</span>\n<span class=\"hljs-selector-attr\">[class^=<span class=\"hljs-string\">&quot;btn-&quot;</span>]</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">5px</span> <span class=\"hljs-number\">10px</span>; }\n\n<span class=\"hljs-comment\">/* &#x7ed3;&#x5c3e;&#x5339;&#x914d; */</span>\n<span class=\"hljs-selector-attr\">[href&#x24;=<span class=\"hljs-string\">&quot;.pdf&quot;</span>]</span> { <span class=\"hljs-attribute\">background</span>: <span class=\"hljs-built_in\">url</span>(<span class=\"hljs-string\">pdf-icon.png</span>) no-repeat; }\n\n<span class=\"hljs-comment\">/* &#x5305;&#x542b;&#x5339;&#x914d; */</span>\n<span class=\"hljs-selector-attr\">[title*=<span class=\"hljs-string\">&quot;hello&quot;</span>]</span> { <span class=\"hljs-attribute\">text-decoration</span>: underline; }\n</code></pre>","children":[],"payload":{"tag":"li","lines":"244,259"}}],"payload":{"tag":"h4","lines":"233,234"}},{"content":"&#x529f;&#x80fd;&#x6027;&#x4f2a;&#x7c7b;","children":[{"content":"\n<p data-lines=\"260,261\"><strong>:is()</strong> - &#x5339;&#x914d;&#x9009;&#x62e9;&#x5668;&#x5217;&#x8868;&#x4e2d;&#x7684;&#x4efb;&#x4f55;&#x9009;&#x62e9;&#x5668;</p>\n<pre data-lines=\"261,265\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:is</span>(<span class=\"hljs-selector-tag\">header</span>, <span class=\"hljs-selector-tag\">main</span>, <span class=\"hljs-selector-tag\">footer</span>) <span class=\"hljs-selector-tag\">p</span> { <span class=\"hljs-attribute\">font-family</span>: sans-serif; }\n<span class=\"hljs-comment\">/* &#x7b49;&#x540c;&#x4e8e;: header p, main p, footer p */</span>\n</code></pre>","children":[],"payload":{"tag":"li","lines":"260,266"}},{"content":"\n<p data-lines=\"266,267\"><strong>:where()</strong> - &#x7c7b;&#x4f3c; :is()&#xff0c;&#x4f46;&#x4f18;&#x5148;&#x7ea7;&#x4e3a;0</p>\n<pre data-lines=\"267,270\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:where</span>(<span class=\"hljs-selector-tag\">header</span>, <span class=\"hljs-selector-tag\">main</span>, <span class=\"hljs-selector-tag\">footer</span>) <span class=\"hljs-selector-tag\">p</span> { <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-number\">#333</span>; }\n</code></pre>","children":[],"payload":{"tag":"li","lines":"266,271"}},{"content":"\n<p data-lines=\"271,272\"><strong>:has()</strong> - &#x7236;&#x5143;&#x7d20;&#x9009;&#x62e9;&#x5668;&#xff08;&#x5b9e;&#x9a8c;&#x6027;&#xff09;</p>\n<pre data-lines=\"272,276\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">article</span><span class=\"hljs-selector-pseudo\">:has</span>(<span class=\"hljs-selector-tag\">h2</span>) { <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">20px</span>; }\n<span class=\"hljs-comment\">/* &#x5305;&#x542b; h2 &#x7684; article &#x5143;&#x7d20; */</span>\n</code></pre>","children":[],"payload":{"tag":"li","lines":"271,277"}}],"payload":{"tag":"h4","lines":"259,260"}},{"content":"&#x9009;&#x62e9;&#x5668;&#x4f18;&#x5148;&#x7ea7;","children":[{"content":"1. <strong>&#x5185;&#x8054;&#x6837;&#x5f0f;</strong>&#xff1a;1000&#x5206;","children":[],"payload":{"tag":"li","lines":"278,279","listIndex":1}},{"content":"2. <strong>ID&#x9009;&#x62e9;&#x5668;</strong>&#xff1a;100&#x5206;","children":[],"payload":{"tag":"li","lines":"279,280","listIndex":2}},{"content":"3. <strong>&#x7c7b;&#x9009;&#x62e9;&#x5668;&#x3001;&#x5c5e;&#x6027;&#x9009;&#x62e9;&#x5668;&#x3001;&#x4f2a;&#x7c7b;</strong>&#xff1a;10&#x5206;","children":[],"payload":{"tag":"li","lines":"280,281","listIndex":3}},{"content":"4. <strong>&#x5143;&#x7d20;&#x9009;&#x62e9;&#x5668;&#x3001;&#x4f2a;&#x5143;&#x7d20;</strong>&#xff1a;1&#x5206;","children":[],"payload":{"tag":"li","lines":"281,282","listIndex":4}},{"content":"5. <strong>&#x901a;&#x914d;&#x7b26;&#x9009;&#x62e9;&#x5668;</strong>&#xff1a;0&#x5206;","children":[],"payload":{"tag":"li","lines":"282,284","listIndex":5}}],"payload":{"tag":"h4","lines":"277,278"}},{"content":"&#x6027;&#x80fd;&#x8003;&#x8651;","children":[{"content":"&#x9009;&#x62e9;&#x5668;&#x4ece;&#x53f3;&#x5411;&#x5de6;&#x5339;&#x914d;&#xff0c;&#x53f3;&#x4fa7;&#x5e94;&#x5c3d;&#x91cf;&#x5177;&#x4f53;","children":[],"payload":{"tag":"li","lines":"287,288"}},{"content":"&#x907f;&#x514d;&#x8fc7;&#x6df1;&#x7684;&#x540e;&#x4ee3;&#x9009;&#x62e9;&#x5668;&#x5d4c;&#x5957;","children":[],"payload":{"tag":"li","lines":"288,289"}},{"content":"&#x9002;&#x5f53;&#x4f7f;&#x7528;&#x7c7b;&#x9009;&#x62e9;&#x5668;&#x66ff;&#x4ee3;&#x590d;&#x6742;&#x7684;&#x7ec4;&#x5408;&#x9009;&#x62e9;&#x5668;","children":[],"payload":{"tag":"li","lines":"289,290"}},{"content":"&#x907f;&#x514d;&#x4f7f;&#x7528;&#x901a;&#x914d;&#x7b26;&#x4f5c;&#x4e3a;&#x9009;&#x62e9;&#x5668;&#x7684;&#x5f00;&#x5934;","children":[],"payload":{"tag":"li","lines":"290,294"}}],"payload":{"tag":"h4","lines":"286,287"}}],"payload":{"tag":"h3","lines":"210,211"}},{"content":"&#x5d4c;&#x5957;&#x9009;&#x62e9;&#x5668;","children":[{"content":"CSS &#x539f;&#x751f;&#x5d4c;&#x5957;&#x8bed;&#x6cd5;&#xff08;CSS Nesting&#xff09;","children":[{"content":"&#x57fa;&#x672c;&#x5d4c;&#x5957;&#x8bed;&#x6cd5;","children":[{"content":"<pre data-lines=\"300,314\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.parent</span> {\n  <span class=\"hljs-attribute\">color</span>: blue;\n  \n  <span class=\"hljs-comment\">/* &#x5d4c;&#x5957;&#x9009;&#x62e9;&#x5668; */</span>\n  &amp; <span class=\"hljs-selector-class\">.child</span> {\n    <span class=\"hljs-attribute\">color</span>: red;\n  }\n}\n\n<span class=\"hljs-comment\">/* &#x7b49;&#x540c;&#x4e8e; */</span>\n<span class=\"hljs-selector-class\">.parent</span> { <span class=\"hljs-attribute\">color</span>: blue; }\n<span class=\"hljs-selector-class\">.parent</span> <span class=\"hljs-selector-class\">.child</span> { <span class=\"hljs-attribute\">color</span>: red; }\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"300,314"}}],"payload":{"tag":"h5","lines":"299,300"}},{"content":"&#x5d4c;&#x5957;&#x7b26;&#x53f7; <code>&amp;</code> &#x7684;&#x4f7f;&#x7528;","children":[{"content":"<pre data-lines=\"318,340\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.button</span> {\n  <span class=\"hljs-comment\">/* &#x57fa;&#x672c;&#x6837;&#x5f0f; */</span>\n  <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">10px</span> <span class=\"hljs-number\">15px</span>;\n  \n  <span class=\"hljs-comment\">/* &#x72b6;&#x6001;&#x53d8;&#x5316; */</span>\n  &amp;<span class=\"hljs-selector-pseudo\">:hover</span> {\n    <span class=\"hljs-attribute\">background-color</span>: <span class=\"hljs-number\">#eee</span>;\n  }\n  \n  <span class=\"hljs-comment\">/* &#x4fee;&#x9970;&#x7b26;&#x6a21;&#x5f0f; */</span>\n  &amp;<span class=\"hljs-attr\">--primary</span> {\n    <span class=\"hljs-attribute\">background-color</span>: blue;\n    <span class=\"hljs-attribute\">color</span>: white;\n  }\n  \n  <span class=\"hljs-comment\">/* &#x7236;&#x5143;&#x7d20;&#x9009;&#x62e9;&#x5668; */</span>\n  <span class=\"hljs-selector-class\">.dark-theme</span> &amp; {\n    <span class=\"hljs-attribute\">background-color</span>: <span class=\"hljs-number\">#333</span>;\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"318,340"}}],"payload":{"tag":"h5","lines":"315,316"}},{"content":"&#x591a;&#x5c42;&#x5d4c;&#x5957;","children":[{"content":"<pre data-lines=\"342,359\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.card</span> {\n  <span class=\"hljs-attribute\">border</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-number\">#ddd</span>;\n  \n  &amp; <span class=\"hljs-selector-class\">.header</span> {\n    <span class=\"hljs-attribute\">background</span>: <span class=\"hljs-number\">#f5f5f5</span>;\n    \n    &amp; <span class=\"hljs-selector-tag\">h2</span> {\n      <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">0</span>;\n      \n      &amp; <span class=\"hljs-selector-class\">.icon</span> {\n        <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">5px</span>;\n      }\n    }\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"342,359"}}],"payload":{"tag":"h5","lines":"341,342"}},{"content":"&#x76f4;&#x63a5;&#x5b50;&#x5143;&#x7d20;&#x5d4c;&#x5957;","children":[{"content":"<pre data-lines=\"361,372\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">nav</span> {\n  &amp; &gt; <span class=\"hljs-selector-tag\">ul</span> {\n    <span class=\"hljs-attribute\">list-style</span>: none;\n    \n    &amp; &gt; <span class=\"hljs-selector-tag\">li</span> {\n      <span class=\"hljs-attribute\">display</span>: inline-block;\n    }\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"361,372"}}],"payload":{"tag":"h5","lines":"360,361"}},{"content":"&#x5d4c;&#x5957;&#x7684; at-rules &#x50cf; @container&#x3001;@media&#x3001;@supports &#x548c; @layer &#x7b49; CSS &#x6761;&#x4ef6;&#x7ec4;&#x89c4;&#x5219;&#x4e5f;&#x53ef;&#x4ee5;&#x8fdb;&#x884c;&#x5d4c;&#x5957;&#x3002;","children":[{"content":"<pre data-lines=\"374,391\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.container</span> {\n  <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">100%</span>;\n  \n  <span class=\"hljs-keyword\">@media</span> (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">768px</span>) {\n    &amp; {\n      <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">750px</span>;\n    }\n  }\n  \n  <span class=\"hljs-keyword\">@media</span> (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">992px</span>) {\n    &amp; {\n      <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">970px</span>;\n    }\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"374,391"}}],"payload":{"tag":"h5","lines":"373,374"}},{"content":"&#x5206;&#x7ec4;&#x548c;&#x5efa;&#x7acb;&#x5173;&#x7cfb;","children":[{"content":"<pre data-lines=\"395,408\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x9009;&#x4e2d;&#x7d27;&#x968f; .feature &#x5143;&#x7d20;&#x4e4b;&#x540e;&#x7684;&#x5144;&#x5f1f;&#x5143;&#x7d20; .heading */</span>\n<span class=\"hljs-selector-class\">.feature</span> {\n  + <span class=\"hljs-selector-class\">.heading</span> {\n    <span class=\"hljs-attribute\">color</span>: blue;\n  }\n\n  <span class=\"hljs-comment\">/* &#x9009;&#x4e2d; .feature &#x5143;&#x7d20;&#x7684;&#x76f4;&#x63a5;&#x5b50;&#x5143;&#x7d20; p */</span>\n  &gt; <span class=\"hljs-selector-tag\">p</span> {\n    <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-number\">1.3em</span>;\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"395,408"}}],"payload":{"tag":"h5","lines":"392,393"}}],"payload":{"tag":"h4","lines":"296,297"}},{"content":"&#x5d4c;&#x5957;&#x9009;&#x62e9;&#x5668;&#x4f1a;&#x7ee7;&#x627f;&#x7236;&#x9009;&#x62e9;&#x5668;&#x4e2d;&#x5177;&#x6709;&#x6700;&#x9ad8;&#x7279;&#x5f02;&#x6027;&#x7684;&#x9009;&#x62e9;&#x5668;&#x7684;&#x7279;&#x5f02;&#x6027;","children":[],"payload":{"tag":"h4","lines":"410,411"}},{"content":"&#x5d4c;&#x5957;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"1. <strong>&#x907f;&#x514d;&#x8fc7;&#x6df1;&#x5d4c;&#x5957;</strong>&#xff1a;&#x4e00;&#x822c;&#x4e0d;&#x8d85;&#x8fc7;3-4&#x5c42;&#xff0c;&#x8fc7;&#x6df1;&#x5d4c;&#x5957;&#x4f1a;&#x5bfc;&#x81f4;&#x9009;&#x62e9;&#x5668;&#x8fc7;&#x4e8e;&#x7279;&#x5b9a;&#xff0c;&#x96be;&#x4ee5;&#x8986;&#x76d6;","children":[],"payload":{"tag":"li","lines":"412,413","listIndex":1}},{"content":"2. <strong>&#x5408;&#x7406;&#x4f7f;&#x7528; <code>&amp;</code> &#x7b26;&#x53f7;</strong>&#xff1a;&#x7279;&#x522b;&#x662f;&#x5728;&#x521b;&#x5efa;&#x4fee;&#x9970;&#x7b26;&#x548c;&#x72b6;&#x6001;&#x7c7b;&#x65f6;","children":[],"payload":{"tag":"li","lines":"413,414","listIndex":2}},{"content":"3. <strong>&#x4fdd;&#x6301;&#x4e00;&#x81f4;&#x7684;&#x7f29;&#x8fdb;</strong>&#xff1a;&#x63d0;&#x9ad8;&#x4ee3;&#x7801;&#x53ef;&#x8bfb;&#x6027;","children":[],"payload":{"tag":"li","lines":"414,415","listIndex":3}},{"content":"4. <strong>&#x7ec4;&#x7ec7;&#x76f8;&#x5173;&#x6837;&#x5f0f;</strong>&#xff1a;&#x5c06;&#x76f8;&#x5173;&#x7684;&#x6837;&#x5f0f;&#x89c4;&#x5219;&#x7ec4;&#x7ec7;&#x5728;&#x4e00;&#x8d77;&#xff0c;&#x63d0;&#x9ad8;&#x4ee3;&#x7801;&#x7684;&#x53ef;&#x7ef4;&#x62a4;&#x6027;","children":[],"payload":{"tag":"li","lines":"415,416","listIndex":4}},{"content":"5. <strong>&#x8003;&#x8651;&#x6027;&#x80fd;&#x5f71;&#x54cd;</strong>&#xff1a;&#x5d4c;&#x5957;&#x53ef;&#x80fd;&#x751f;&#x6210;&#x590d;&#x6742;&#x9009;&#x62e9;&#x5668;&#xff0c;&#x5f71;&#x54cd;&#x6e32;&#x67d3;&#x6027;&#x80fd;","children":[],"payload":{"tag":"li","lines":"416,418","listIndex":5}}],"payload":{"tag":"h4","lines":"411,412"}},{"content":"&#x6d4f;&#x89c8;&#x5668;&#x517c;&#x5bb9;&#x6027;","children":[{"content":"Chrome/Edge 112+ &#x5b8c;&#x5168;&#x652f;&#x6301;","children":[],"payload":{"tag":"li","lines":"420,421"}},{"content":"Firefox 117+ &#x5b8c;&#x5168;&#x652f;&#x6301;","children":[],"payload":{"tag":"li","lines":"421,422"}},{"content":"Safari 16.5+ &#x5b8c;&#x5168;&#x652f;&#x6301;","children":[],"payload":{"tag":"li","lines":"422,423"}},{"content":"&#x5bf9;&#x4e8e;&#x4e0d;&#x652f;&#x6301;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#xff0c;&#x53ef;&#x4ee5;&#x4f7f;&#x7528;PostCSS&#x7b49;&#x5de5;&#x5177;&#x8fdb;&#x884c;&#x8f6c;&#x6362;","children":[],"payload":{"tag":"li","lines":"423,424"}}],"payload":{"tag":"h4","lines":"418,419"}}],"payload":{"tag":"h3","lines":"294,295"}}],"payload":{"tag":"h2","lines":"68,69"}},{"content":"&#x989c;&#x8272;","children":[{"content":"&#x989c;&#x8272;&#x8868;&#x793a;&#x6cd5;","children":[{"content":"&#x989c;&#x8272;&#x5173;&#x952e;&#x5b57;","children":[{"content":"<strong>&#x57fa;&#x672c;&#x989c;&#x8272;</strong>&#xff1a;black&#x3001;white&#x3001;red&#x3001;green&#x3001;blue&#x7b49;","children":[],"payload":{"tag":"li","lines":"429,430"}},{"content":"<strong>&#x6269;&#x5c55;&#x989c;&#x8272;</strong>&#xff1a;coral&#x3001;darkviolet&#x3001;mediumseagreen&#x7b49;","children":[],"payload":{"tag":"li","lines":"430,431"}},{"content":"<strong>&#x7279;&#x6b8a;&#x5173;&#x952e;&#x5b57;</strong>","children":[{"content":"transparent&#xff1a;&#x5b8c;&#x5168;&#x900f;&#x660e;","children":[],"payload":{"tag":"li","lines":"432,433"}},{"content":"currentColor&#xff1a;&#x7ee7;&#x627f;&#x5f53;&#x524d;&#x5143;&#x7d20;&#x7684;color&#x503c;","children":[],"payload":{"tag":"li","lines":"433,435"}}],"payload":{"tag":"li","lines":"431,435"}}],"payload":{"tag":"h4","lines":"428,429"}},{"content":"&#x5341;&#x516d;&#x8fdb;&#x5236;&#xff08;HEX&#xff09;&#x989c;&#x8272;","children":[{"content":"<strong>6&#x4f4d;&#x5341;&#x516d;&#x8fdb;&#x5236;</strong>&#xff1a;#RRGGBB&#xff08;&#x5982;#ff0000&#x8868;&#x793a;&#x7ea2;&#x8272;&#xff09;","children":[],"payload":{"tag":"li","lines":"436,437"}},{"content":"<strong>3&#x4f4d;&#x7b80;&#x5199;</strong>&#xff1a;#RGB&#xff08;&#x5982;#f00&#x7b49;&#x540c;&#x4e8e;#ff0000&#xff09;","children":[],"payload":{"tag":"li","lines":"437,438"}},{"content":"<strong>8&#x4f4d;&#x5e26;&#x900f;&#x660e;&#x5ea6;</strong>&#xff1a;#RRGGBBAA&#xff08;&#x5982;#ff0000ff&#x8868;&#x793a;&#x4e0d;&#x900f;&#x660e;&#x7ea2;&#x8272;&#xff09;","children":[],"payload":{"tag":"li","lines":"438,439"}},{"content":"<strong>4&#x4f4d;&#x5e26;&#x900f;&#x660e;&#x5ea6;&#x7b80;&#x5199;</strong>&#xff1a;#RGBA&#xff08;&#x5982;#f00f&#x7b49;&#x540c;&#x4e8e;#ff0000ff&#xff09;","children":[],"payload":{"tag":"li","lines":"439,441"}}],"payload":{"tag":"h4","lines":"435,436"}},{"content":"RGB&#x548c;RGBA&#x989c;&#x8272;","children":[{"content":"<strong>&#x4f20;&#x7edf;&#x8bed;&#x6cd5;</strong>&#xff1a;rgb(255, 0, 0)&#x3001;rgba(255, 0, 0, 0.5)","children":[],"payload":{"tag":"li","lines":"442,443"}},{"content":"<strong>&#x73b0;&#x4ee3;&#x8bed;&#x6cd5;</strong>&#xff1a;rgb(255 0 0)&#x3001;rgb(255 0 0 / 50%)","children":[],"payload":{"tag":"li","lines":"443,444"}},{"content":"<strong>&#x767e;&#x5206;&#x6bd4;&#x503c;</strong>&#xff1a;rgb(100% 0% 0%)","children":[],"payload":{"tag":"li","lines":"444,446"}}],"payload":{"tag":"h4","lines":"441,442"}},{"content":"HSL&#x548c;HSLA&#x989c;&#x8272;","children":[{"content":"<strong>&#x8272;&#x76f8;(H)</strong>&#xff1a;0-360&#x5ea6;&#xff0c;&#x8868;&#x793a;&#x8272;&#x5f69;&#xff08;0/360=&#x7ea2;&#xff0c;120=&#x7eff;&#xff0c;240=&#x84dd;&#xff09;","children":[],"payload":{"tag":"li","lines":"447,448"}},{"content":"<strong>&#x9971;&#x548c;&#x5ea6;(S)</strong>&#xff1a;0%-100%&#xff0c;&#x8868;&#x793a;&#x989c;&#x8272;&#x7eaf;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"448,449"}},{"content":"<strong>&#x4eae;&#x5ea6;(L)</strong>&#xff1a;0%-100%&#xff0c;&#x8868;&#x793a;&#x660e;&#x6697;&#x7a0b;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"449,450"}},{"content":"<strong>&#x8bed;&#x6cd5;</strong>&#xff1a;hsl(0, 100%, 50%)&#x3001;hsl(0 100% 50% / 50%)","children":[],"payload":{"tag":"li","lines":"450,452"}}],"payload":{"tag":"h4","lines":"446,447"}},{"content":"&#x73b0;&#x4ee3;&#x989c;&#x8272;&#x683c;&#x5f0f;","children":[{"content":"<strong>HWB</strong>&#xff1a;hwb(&#x8272;&#x76f8; &#x767d;&#x8272;% &#x9ed1;&#x8272;%)","children":[],"payload":{"tag":"li","lines":"453,454"}},{"content":"<strong>LAB</strong>&#xff1a;lab(&#x4eae;&#x5ea6;% a&#x8f74;&#x503c; b&#x8f74;&#x503c;)","children":[],"payload":{"tag":"li","lines":"454,455"}},{"content":"<strong>LCH</strong>&#xff1a;lch(&#x4eae;&#x5ea6;% &#x8272;&#x5ea6; &#x8272;&#x76f8;)","children":[],"payload":{"tag":"li","lines":"455,456"}},{"content":"<strong>color()</strong>&#xff1a;color(display-p3 1 0 0)","children":[],"payload":{"tag":"li","lines":"456,458"}}],"payload":{"tag":"h4","lines":"452,453"}}],"payload":{"tag":"h3","lines":"426,427"}},{"content":"&#x989c;&#x8272;&#x51fd;&#x6570;","children":[{"content":"&#x989c;&#x8272;&#x6df7;&#x5408;","children":[{"content":"<pre data-lines=\"461,464\"><code class=\"language-css\"><span class=\"hljs-attribute\">color</span>-mix(in srgb, red, blue)\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"461,464"}}],"payload":{"tag":"h4","lines":"460,461"}},{"content":"&#x5bf9;&#x6bd4;&#x5ea6;&#x9009;&#x62e9;","children":[{"content":"<pre data-lines=\"466,469\"><code class=\"language-css\"><span class=\"hljs-attribute\">color</span>-contrast(<span class=\"hljs-selector-id\">#222</span> vs <span class=\"hljs-selector-id\">#fff</span>, <span class=\"hljs-selector-id\">#aaa</span>, <span class=\"hljs-selector-id\">#777</span>)\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"466,469"}}],"payload":{"tag":"h4","lines":"465,466"}},{"content":"&#x989c;&#x8272;&#x8c03;&#x6574;","children":[{"content":"<pre data-lines=\"471,474\"><code class=\"language-css\"><span class=\"hljs-attribute\">color</span>-adjust(red lightness(+<span class=\"hljs-number\">20%</span>))\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"471,474"}}],"payload":{"tag":"h4","lines":"470,471"}}],"payload":{"tag":"h3","lines":"458,459"}},{"content":"&#x900f;&#x660e;&#x5ea6;&#x63a7;&#x5236;","children":[{"content":"<strong>&#x989c;&#x8272;&#x5185;&#x900f;&#x660e;&#x5ea6;</strong>&#xff1a;rgba()&#x3001;hsla()&#x3001;#RRGGBBAA","children":[],"payload":{"tag":"li","lines":"476,477"}},{"content":"<strong>&#x5143;&#x7d20;&#x900f;&#x660e;&#x5ea6;</strong>&#xff1a;opacity&#x5c5e;&#x6027;&#xff08;&#x5f71;&#x54cd;&#x6574;&#x4e2a;&#x5143;&#x7d20;&#x53ca;&#x5176;&#x5185;&#x5bb9;&#xff09;","children":[],"payload":{"tag":"li","lines":"477,479"}}],"payload":{"tag":"h3","lines":"475,476"}},{"content":"&#x6e10;&#x53d8;","children":[{"content":"&#x7ebf;&#x6027;&#x6e10;&#x53d8;","children":[{"content":"<pre data-lines=\"482,485\"><code class=\"language-css\">linear-gradient(<span class=\"hljs-selector-tag\">to</span> <span class=\"hljs-attribute\">right</span>, red, blue)\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"482,485"}}],"payload":{"tag":"h4","lines":"481,482"}},{"content":"&#x5f84;&#x5411;&#x6e10;&#x53d8;","children":[{"content":"<pre data-lines=\"487,490\"><code class=\"language-css\">radial-gradient(<span class=\"hljs-selector-tag\">circle</span>, red, blue)\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"487,490"}}],"payload":{"tag":"h4","lines":"486,487"}},{"content":"&#x9525;&#x5f62;&#x6e10;&#x53d8;","children":[{"content":"<pre data-lines=\"492,495\"><code class=\"language-css\">conic-gradient(red, blue)\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"492,495"}}],"payload":{"tag":"h4","lines":"491,492"}}],"payload":{"tag":"h3","lines":"479,480"}},{"content":"CSS&#x989c;&#x8272;&#x53d8;&#x91cf;","children":[{"content":"<pre data-lines=\"497,505\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--primary-color</span>: <span class=\"hljs-number\">#3498db</span>;\n}\n<span class=\"hljs-selector-class\">.button</span> {\n  <span class=\"hljs-attribute\">background-color</span>: <span class=\"hljs-built_in\">var</span>(--primary-color);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"497,505"}}],"payload":{"tag":"h3","lines":"496,497"}},{"content":"&#x989c;&#x8272;&#x53ef;&#x8bbf;&#x95ee;&#x6027;","children":[{"content":"&#x5bf9;&#x6bd4;&#x5ea6;&#x8981;&#x6c42;","children":[{"content":"<strong>WCAG AA&#x7ea7;</strong>&#xff1a;&#x6b63;&#x5e38;&#x6587;&#x672c;4.5:1&#xff0c;&#x5927;&#x6587;&#x672c;3:1","children":[],"payload":{"tag":"li","lines":"509,510"}},{"content":"<strong>WCAG AAA&#x7ea7;</strong>&#xff1a;&#x6b63;&#x5e38;&#x6587;&#x672c;7:1&#xff0c;&#x5927;&#x6587;&#x672c;4.5:1","children":[],"payload":{"tag":"li","lines":"510,512"}}],"payload":{"tag":"h4","lines":"508,509"}},{"content":"&#x8272;&#x76f2;&#x53cb;&#x597d;&#x8bbe;&#x8ba1;","children":[{"content":"&#x4e0d;&#x4ec5;&#x4f9d;&#x8d56;&#x989c;&#x8272;&#x4f20;&#x8fbe;&#x4fe1;&#x606f;","children":[],"payload":{"tag":"li","lines":"513,514"}},{"content":"&#x4f7f;&#x7528;&#x9ad8;&#x5bf9;&#x6bd4;&#x5ea6;&#x7ec4;&#x5408;","children":[],"payload":{"tag":"li","lines":"514,515"}},{"content":"&#x907f;&#x514d;&#x7ea2;/&#x7eff;&#x7ec4;&#x5408;","children":[],"payload":{"tag":"li","lines":"515,517"}}],"payload":{"tag":"h4","lines":"512,513"}}],"payload":{"tag":"h3","lines":"506,507"}},{"content":"&#x8272;&#x57df;&#x4e0e;&#x989c;&#x8272;&#x7ba1;&#x7406;","children":[{"content":"<strong>sRGB</strong>&#xff1a;&#x6807;&#x51c6;&#x7f51;&#x9875;&#x989c;&#x8272;&#x7a7a;&#x95f4;","children":[],"payload":{"tag":"li","lines":"518,519"}},{"content":"<strong>Display P3</strong>&#xff1a;&#x66f4;&#x5e7f;&#x8272;&#x57df;&#xff0c;&#x66f4;&#x9c9c;&#x8273;&#x989c;&#x8272;","children":[],"payload":{"tag":"li","lines":"519,520"}},{"content":"<strong>&#x989c;&#x8272;&#x56de;&#x9000;</strong>&#xff1a;&#x4e3a;&#x4e0d;&#x652f;&#x6301;&#x65b0;&#x683c;&#x5f0f;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x63d0;&#x4f9b;&#x66ff;&#x4ee3;&#x65b9;&#x6848;","children":[],"payload":{"tag":"li","lines":"520,522"}}],"payload":{"tag":"h3","lines":"517,518"}},{"content":"&#x7cfb;&#x7edf;&#x989c;&#x8272;","children":[{"content":"Canvas&#x3001;CanvasText&#x3001;ButtonBorder&#x7b49;&#x5339;&#x914d;&#x64cd;&#x4f5c;&#x7cfb;&#x7edf;&#x4e3b;&#x9898;","children":[],"payload":{"tag":"li","lines":"523,525"}}],"payload":{"tag":"h3","lines":"522,523"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"&#x521b;&#x5efa;&#x989c;&#x8272;&#x7cfb;&#x7edf;&#x4e0e;&#x53d8;&#x91cf;","children":[],"payload":{"tag":"li","lines":"526,527"}},{"content":"&#x8003;&#x8651;&#x6697;&#x8272;&#x6a21;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"527,528"}},{"content":"&#x4f7f;&#x7528;&#x8bed;&#x4e49;&#x5316;&#x547d;&#x540d;&#xff08;--primary-color&#x800c;&#x975e;--blue&#xff09;","children":[],"payload":{"tag":"li","lines":"528,529"}},{"content":"&#x63d0;&#x4f9b;&#x989c;&#x8272;&#x56de;&#x9000;&#x65b9;&#x6848;","children":[],"payload":{"tag":"li","lines":"529,531"}}],"payload":{"tag":"h3","lines":"525,526"}}],"payload":{"tag":"h2","lines":"424,425"}},{"content":"&#x5c3a;&#x5bf8;&#x548c;&#x5355;&#x4f4d;","children":[{"content":"&#x7edd;&#x5bf9;&#x5355;&#x4f4d;","children":[{"content":"px&#xff08;&#x50cf;&#x7d20;&#xff09;&#xff1a;&#x6700;&#x5e38;&#x7528;&#x7684;&#x5355;&#x4f4d;&#xff0c;&#x5c4f;&#x5e55;&#x4e0a;&#x7684;&#x4e00;&#x4e2a;&#x70b9;","children":[],"payload":{"tag":"li","lines":"534,535"}},{"content":"in&#xff08;&#x82f1;&#x5bf8;&#xff09;&#xff1a;1in = 96px","children":[],"payload":{"tag":"li","lines":"535,536"}},{"content":"cm&#xff08;&#x5398;&#x7c73;&#xff09;&#xff1a;1cm = 37.8px","children":[],"payload":{"tag":"li","lines":"536,537"}},{"content":"mm&#xff08;&#x6beb;&#x7c73;&#xff09;&#xff1a;1mm = 3.78px","children":[],"payload":{"tag":"li","lines":"537,538"}},{"content":"pt&#xff08;&#x70b9;&#xff09;&#xff1a;1pt = 1/72&#x82f1;&#x5bf8;","children":[],"payload":{"tag":"li","lines":"538,539"}},{"content":"pc&#xff08;&#x6d3e;&#x5361;&#xff09;&#xff1a;1pc = 12pt","children":[],"payload":{"tag":"li","lines":"539,540"}},{"content":"&#x5e94;&#x7528;&#x573a;&#x666f;","children":[{"content":"&#x56fa;&#x5b9a;&#x5c3a;&#x5bf8;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"541,542"}},{"content":"&#x8fb9;&#x6846;&#x5bbd;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"542,543"}},{"content":"&#x6253;&#x5370;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"543,544"}},{"content":"&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x65ad;&#x70b9;","children":[],"payload":{"tag":"li","lines":"544,546"}}],"payload":{"tag":"li","lines":"540,546"}}],"payload":{"tag":"h3","lines":"533,534"}},{"content":"&#x76f8;&#x5bf9;&#x5355;&#x4f4d;","children":[{"content":"&#x76f8;&#x5bf9;&#x4e8e;&#x5b57;&#x4f53;","children":[{"content":"em&#xff1a;&#x76f8;&#x5bf9;&#x4e8e;&#x5143;&#x7d20;&#x7684;&#x7236;&#x5143;&#x7d20;&#x5b57;&#x4f53;&#x5927;&#x5c0f;","children":[{"content":"&#x5d4c;&#x5957;&#x4f7f;&#x7528;&#x65f6;&#x4f1a;&#x53e0;&#x52a0;&#x8ba1;&#x7b97;","children":[],"payload":{"tag":"li","lines":"549,550"}},{"content":"&#x9002;&#x5408;&#x7ec4;&#x4ef6;&#x5185;&#x90e8;&#x95f4;&#x8ddd;","children":[],"payload":{"tag":"li","lines":"550,551"}}],"payload":{"tag":"li","lines":"548,551"}},{"content":"rem&#xff1a;&#x76f8;&#x5bf9;&#x4e8e;&#x6839;&#x5143;&#x7d20;(html)&#x7684;&#x5b57;&#x4f53;&#x5927;&#x5c0f;","children":[{"content":"&#x4e0d;&#x4f1a;&#x53e0;&#x52a0;&#x8ba1;&#x7b97;","children":[],"payload":{"tag":"li","lines":"552,553"}},{"content":"&#x9002;&#x5408;&#x5168;&#x5c40;&#x4e00;&#x81f4;&#x7684;&#x5c3a;&#x5bf8;","children":[],"payload":{"tag":"li","lines":"553,554"}}],"payload":{"tag":"li","lines":"551,554"}},{"content":"ch&#xff1a;&#x57fa;&#x4e8e;&#x5b57;&#x7b26;&quot;0&quot;&#x7684;&#x5bbd;&#x5ea6;","children":[{"content":"&#x9002;&#x5408;&#x63a7;&#x5236;&#x6587;&#x672c;&#x884c;&#x5bbd;","children":[],"payload":{"tag":"li","lines":"555,556"}}],"payload":{"tag":"li","lines":"554,556"}},{"content":"ex&#xff1a;&#x57fa;&#x4e8e;&#x5b57;&#x4f53;&#x7684;x-height","children":[{"content":"&#x9002;&#x5408;&#x4e0e;&#x6587;&#x672c;&#x57fa;&#x7ebf;&#x5bf9;&#x9f50;","children":[],"payload":{"tag":"li","lines":"557,559"}}],"payload":{"tag":"li","lines":"556,559"}}],"payload":{"tag":"h4","lines":"547,548"}},{"content":"&#x76f8;&#x5bf9;&#x4e8e;&#x89c6;&#x53e3;","children":[{"content":"vw&#xff1a;&#x89c6;&#x53e3;&#x5bbd;&#x5ea6;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"560,561"}},{"content":"vh&#xff1a;&#x89c6;&#x53e3;&#x9ad8;&#x5ea6;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"561,562"}},{"content":"vmin&#xff1a;&#x89c6;&#x53e3;&#x8f83;&#x5c0f;&#x5c3a;&#x5bf8;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"562,563"}},{"content":"vmax&#xff1a;&#x89c6;&#x53e3;&#x8f83;&#x5927;&#x5c3a;&#x5bf8;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"563,564"}},{"content":"&#x65b0;&#x89c6;&#x53e3;&#x5355;&#x4f4d;(CSS Values Level 4)","children":[{"content":"svw/svh&#xff1a;&#x5c0f;&#x89c6;&#x53e3;&#x5355;&#x4f4d;&#xff0c;&#x4e0d;&#x8003;&#x8651;&#x52a8;&#x6001;&#x5de5;&#x5177;&#x680f;","children":[],"payload":{"tag":"li","lines":"565,566"}},{"content":"lvw/lvh&#xff1a;&#x5927;&#x89c6;&#x53e3;&#x5355;&#x4f4d;&#xff0c;&#x4e0d;&#x8003;&#x8651;&#x52a8;&#x6001;&#x5de5;&#x5177;&#x680f;","children":[],"payload":{"tag":"li","lines":"566,567"}},{"content":"dvw/dvh&#xff1a;&#x52a8;&#x6001;&#x89c6;&#x53e3;&#x5355;&#x4f4d;&#xff0c;&#x8003;&#x8651;&#x52a8;&#x6001;&#x5de5;&#x5177;&#x680f;","children":[],"payload":{"tag":"li","lines":"567,568"}}],"payload":{"tag":"li","lines":"564,568"}},{"content":"&#x5e94;&#x7528;&#x573a;&#x666f;","children":[{"content":"&#x5168;&#x5c4f;&#x5e03;&#x5c40;","children":[],"payload":{"tag":"li","lines":"569,570"}},{"content":"&#x54cd;&#x5e94;&#x5f0f;&#x6392;&#x7248;","children":[],"payload":{"tag":"li","lines":"570,571"}},{"content":"&#x89c6;&#x89c9;&#x6548;&#x679c;","children":[],"payload":{"tag":"li","lines":"571,573"}}],"payload":{"tag":"li","lines":"568,573"}}],"payload":{"tag":"h4","lines":"559,560"}}],"payload":{"tag":"h3","lines":"546,547"}},{"content":"&#x767e;&#x5206;&#x6bd4;&#x5355;&#x4f4d;","children":[{"content":"&#x76f8;&#x5bf9;&#x4e8e;&#x7236;&#x5143;&#x7d20;&#x7684;&#x5c3a;&#x5bf8;","children":[],"payload":{"tag":"li","lines":"574,575"}},{"content":"&#x4e0d;&#x540c;&#x5c5e;&#x6027;&#x53c2;&#x7167;&#x7269;&#x4e0d;&#x540c;","children":[{"content":"width/margin/padding&#xff1a;&#x76f8;&#x5bf9;&#x4e8e;&#x7236;&#x5143;&#x7d20;&#x5bbd;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"576,577"}},{"content":"height&#xff1a;&#x76f8;&#x5bf9;&#x4e8e;&#x7236;&#x5143;&#x7d20;&#x9ad8;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"577,578"}},{"content":"transform&#xff1a;&#x76f8;&#x5bf9;&#x4e8e;&#x5143;&#x7d20;&#x81ea;&#x8eab;&#x5c3a;&#x5bf8;","children":[],"payload":{"tag":"li","lines":"578,579"}}],"payload":{"tag":"li","lines":"575,579"}},{"content":"&#x5e94;&#x7528;&#x573a;&#x666f;","children":[{"content":"&#x6d41;&#x4f53;&#x5e03;&#x5c40;","children":[],"payload":{"tag":"li","lines":"580,581"}},{"content":"&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;","children":[],"payload":{"tag":"li","lines":"581,583"}}],"payload":{"tag":"li","lines":"579,583"}}],"payload":{"tag":"h3","lines":"573,574"}},{"content":"&#x6570;&#x5b66;&#x51fd;&#x6570;","children":[{"content":"calc()","children":[{"content":"&#x5141;&#x8bb8;&#x4e0d;&#x540c;&#x5355;&#x4f4d;&#x6df7;&#x5408;&#x8ba1;&#x7b97;","children":[],"payload":{"tag":"li","lines":"585,586"}},{"content":"&#x652f;&#x6301;&#x56db;&#x5219;&#x8fd0;&#x7b97;","children":[],"payload":{"tag":"li","lines":"586,587"}},{"content":"&#x53ef;&#x4ee5;&#x5d4c;&#x5957;&#x4f7f;&#x7528;","children":[],"payload":{"tag":"li","lines":"587,588"}},{"content":"&#x793a;&#x4f8b;&#xff1a;<code>width: calc(100% - 40px);</code>","children":[],"payload":{"tag":"li","lines":"588,590"}}],"payload":{"tag":"h4","lines":"584,585"}},{"content":"&#x5176;&#x4ed6;&#x6570;&#x5b66;&#x51fd;&#x6570;","children":[{"content":"min()&#xff1a;&#x8fd4;&#x56de;&#x53c2;&#x6570;&#x5217;&#x8868;&#x4e2d;&#x7684;&#x6700;&#x5c0f;&#x503c;","children":[{"content":"&#x793a;&#x4f8b;&#xff1a;<code>width: min(50%, 500px);</code>","children":[],"payload":{"tag":"li","lines":"592,593"}}],"payload":{"tag":"li","lines":"591,593"}},{"content":"max()&#xff1a;&#x8fd4;&#x56de;&#x53c2;&#x6570;&#x5217;&#x8868;&#x4e2d;&#x7684;&#x6700;&#x5927;&#x503c;","children":[{"content":"&#x793a;&#x4f8b;&#xff1a;<code>width: max(50%, 300px);</code>","children":[],"payload":{"tag":"li","lines":"594,595"}}],"payload":{"tag":"li","lines":"593,595"}},{"content":"clamp()&#xff1a;&#x786e;&#x4fdd;&#x503c;&#x5728;&#x8303;&#x56f4;&#x5185;","children":[{"content":"&#x8bed;&#x6cd5;&#xff1a;<code>clamp(MIN, VAL, MAX)</code>","children":[],"payload":{"tag":"li","lines":"596,597"}},{"content":"&#x793a;&#x4f8b;&#xff1a;<code>font-size: clamp(1rem, 2.5vw, 2rem);</code>","children":[],"payload":{"tag":"li","lines":"597,599"}}],"payload":{"tag":"li","lines":"595,599"}}],"payload":{"tag":"h4","lines":"590,591"}}],"payload":{"tag":"h3","lines":"583,584"}},{"content":"&#x5185;&#x5728;&#x5c3a;&#x5bf8;&#x4e0e;&#x5916;&#x5728;&#x5c3a;&#x5bf8;","children":[{"content":"&#x5185;&#x5728;&#x5c3a;&#x5bf8;(Intrinsic Sizing)","children":[{"content":"&#x8ba9;&#x5185;&#x5bb9;&#x51b3;&#x5b9a;&#x5143;&#x7d20;&#x5927;&#x5c0f;","children":[],"payload":{"tag":"li","lines":"601,602"}},{"content":"&#x5173;&#x952e;&#x5b57;","children":[{"content":"min-content&#xff1a;&#x91c7;&#x7528;&#x5185;&#x5bb9;&#x7684;&#x6700;&#x5c0f;&#x5bbd;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"603,604"}},{"content":"max-content&#xff1a;&#x91c7;&#x7528;&#x5185;&#x5bb9;&#x7684;&#x6700;&#x5927;&#x5bbd;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"604,605"}},{"content":"fit-content&#xff1a;&#x4ecb;&#x4e8e;&#x4e24;&#x8005;&#x4e4b;&#x95f4;&#xff0c;&#x4e0d;&#x8d85;&#x8fc7;&#x53ef;&#x7528;&#x7a7a;&#x95f4;","children":[],"payload":{"tag":"li","lines":"605,606"}},{"content":"auto&#xff1a;&#x9ed8;&#x8ba4;&#x503c;&#xff0c;&#x6839;&#x636e;&#x4e0a;&#x4e0b;&#x6587;&#x81ea;&#x52a8;&#x8ba1;&#x7b97;","children":[],"payload":{"tag":"li","lines":"606,608"}}],"payload":{"tag":"li","lines":"602,608"}}],"payload":{"tag":"h4","lines":"600,601"}},{"content":"&#x5916;&#x5728;&#x5c3a;&#x5bf8;(Extrinsic Sizing)","children":[{"content":"&#x660e;&#x786e;&#x6307;&#x5b9a;&#x5143;&#x7d20;&#x5927;&#x5c0f;&#xff0c;&#x4e0d;&#x8003;&#x8651;&#x5185;&#x5bb9;","children":[],"payload":{"tag":"li","lines":"609,610"}},{"content":"&#x56fa;&#x5b9a;&#x503c;&#xff1a;&#x5982;300px","children":[],"payload":{"tag":"li","lines":"610,611"}},{"content":"&#x76f8;&#x5bf9;&#x503c;&#xff1a;&#x5982;50%&#x3001;50vh","children":[],"payload":{"tag":"li","lines":"611,613"}}],"payload":{"tag":"h4","lines":"608,609"}}],"payload":{"tag":"h3","lines":"599,600"}},{"content":"&#x76d2;&#x6a21;&#x578b;&#x4e0e;&#x5927;&#x5c0f;&#x8bbe;&#x7f6e;","children":[{"content":"content-box&#xff1a;&#x9ed8;&#x8ba4;&#x76d2;&#x6a21;&#x578b;","children":[{"content":"width/height&#x53ea;&#x5305;&#x62ec;&#x5185;&#x5bb9;&#x533a;&#x57df;","children":[],"payload":{"tag":"li","lines":"615,616"}}],"payload":{"tag":"li","lines":"614,616"}},{"content":"border-box&#xff1a;&#x66ff;&#x4ee3;&#x76d2;&#x6a21;&#x578b;","children":[{"content":"width/height&#x5305;&#x62ec;&#x5185;&#x5bb9;&#x3001;&#x5185;&#x8fb9;&#x8ddd;&#x548c;&#x8fb9;&#x6846;","children":[],"payload":{"tag":"li","lines":"617,618"}},{"content":"&#x7b80;&#x5316;&#x5e03;&#x5c40;&#x8ba1;&#x7b97;","children":[],"payload":{"tag":"li","lines":"618,620"}}],"payload":{"tag":"li","lines":"616,620"}}],"payload":{"tag":"h3","lines":"613,614"}},{"content":"&#x5c3a;&#x5bf8;&#x7ea6;&#x675f;","children":[{"content":"min-width/min-height&#xff1a;&#x6700;&#x5c0f;&#x5c3a;&#x5bf8;&#x9650;&#x5236;","children":[],"payload":{"tag":"li","lines":"621,622"}},{"content":"max-width/max-height&#xff1a;&#x6700;&#x5927;&#x5c3a;&#x5bf8;&#x9650;&#x5236;","children":[],"payload":{"tag":"li","lines":"622,623"}},{"content":"&#x7ec4;&#x5408;&#x4f7f;&#x7528;&#xff1a;<code>width: clamp(200px, 50%, 800px);</code>","children":[],"payload":{"tag":"li","lines":"623,625"}}],"payload":{"tag":"h3","lines":"620,621"}},{"content":"&#x7eb5;&#x6a2a;&#x6bd4;(Aspect Ratio)","children":[{"content":"&#x8bbe;&#x7f6e;&#x5143;&#x7d20;&#x7684;&#x5bbd;&#x9ad8;&#x6bd4;","children":[],"payload":{"tag":"li","lines":"626,627"}},{"content":"&#x8bed;&#x6cd5;&#xff1a;<code>aspect-ratio: 16 / 9;</code>","children":[],"payload":{"tag":"li","lines":"627,628"}},{"content":"&#x5e94;&#x7528;&#x573a;&#x666f;","children":[{"content":"&#x54cd;&#x5e94;&#x5f0f;&#x5a92;&#x4f53;","children":[],"payload":{"tag":"li","lines":"629,630"}},{"content":"&#x5361;&#x7247;&#x5e03;&#x5c40;","children":[],"payload":{"tag":"li","lines":"630,631"}},{"content":"&#x56fe;&#x7247;&#x5bb9;&#x5668;","children":[],"payload":{"tag":"li","lines":"631,633"}}],"payload":{"tag":"li","lines":"628,633"}}],"payload":{"tag":"h3","lines":"625,626"}},{"content":"&#x5e03;&#x5c40;&#x7cfb;&#x7edf;&#x4e2d;&#x7684;&#x5c3a;&#x5bf8;","children":[{"content":"Grid&#x5e03;&#x5c40;","children":[{"content":"&#x56fa;&#x5b9a;&#x5927;&#x5c0f;&#xff1a;<code>grid-template-columns: 100px 200px 100px;</code>","children":[],"payload":{"tag":"li","lines":"635,636"}},{"content":"&#x5f39;&#x6027;&#x5927;&#x5c0f;&#xff1a;<code>grid-template-columns: 1fr 2fr 1fr;</code>","children":[],"payload":{"tag":"li","lines":"636,637"}},{"content":"&#x81ea;&#x52a8;&#x586b;&#x5145;&#xff1a;<code>grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));</code>","children":[],"payload":{"tag":"li","lines":"637,639"}}],"payload":{"tag":"h4","lines":"634,635"}},{"content":"Flexbox&#x5e03;&#x5c40;","children":[{"content":"flex-grow&#xff1a;&#x5f39;&#x6027;&#x589e;&#x957f;&#x56e0;&#x5b50;","children":[],"payload":{"tag":"li","lines":"640,641"}},{"content":"flex-shrink&#xff1a;&#x5f39;&#x6027;&#x6536;&#x7f29;&#x56e0;&#x5b50;","children":[],"payload":{"tag":"li","lines":"641,642"}},{"content":"flex-basis&#xff1a;&#x57fa;&#x7840;&#x5927;&#x5c0f;","children":[],"payload":{"tag":"li","lines":"642,643"}},{"content":"&#x7b80;&#x5199;&#xff1a;<code>flex: 1 1 auto;</code> (grow shrink basis)","children":[],"payload":{"tag":"li","lines":"643,645"}}],"payload":{"tag":"h4","lines":"639,640"}}],"payload":{"tag":"h3","lines":"633,634"}},{"content":"&#x54cd;&#x5e94;&#x5f0f;&#x5927;&#x5c0f;&#x8bbe;&#x7f6e;","children":[{"content":"&#x5a92;&#x4f53;&#x67e5;&#x8be2;","children":[{"content":"<pre data-lines=\"647,652\"><code class=\"language-css\"><span class=\"hljs-keyword\">@media</span> (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">768px</span>) {\n  <span class=\"hljs-selector-class\">.element</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">75%</span>; }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"647,652"}}],"payload":{"tag":"h4","lines":"646,647"}},{"content":"&#x5bb9;&#x5668;&#x67e5;&#x8be2;","children":[{"content":"<pre data-lines=\"654,659\"><code class=\"language-css\"><span class=\"hljs-keyword\">@container</span> (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">400px</span>) {\n  <span class=\"hljs-selector-class\">.card</span> { <span class=\"hljs-attribute\">grid-template-columns</span>: <span class=\"hljs-number\">200px</span> <span class=\"hljs-number\">1</span>fr; }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"654,659"}}],"payload":{"tag":"h4","lines":"653,654"}}],"payload":{"tag":"h3","lines":"645,646"}},{"content":"&#x5e38;&#x89c1;&#x5e94;&#x7528;&#x573a;&#x666f;","children":[{"content":"&#x5168;&#x5c4f;&#x5143;&#x7d20;","children":[{"content":"<pre data-lines=\"662,668\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.fullscreen</span> {\n  <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">100vw</span>;\n  <span class=\"hljs-attribute\">height</span>: <span class=\"hljs-number\">100vh</span>;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"662,668"}}],"payload":{"tag":"h4","lines":"661,662"}},{"content":"&#x5c45;&#x4e2d;&#x56fa;&#x5b9a;&#x5bbd;&#x5ea6;&#x5185;&#x5bb9;","children":[{"content":"<pre data-lines=\"670,676\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.centered</span> {\n  <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-built_in\">min</span>(<span class=\"hljs-number\">90%</span>, <span class=\"hljs-number\">1200px</span>);\n  <span class=\"hljs-attribute\">margin-inline</span>: auto;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"670,676"}}],"payload":{"tag":"h4","lines":"669,670"}},{"content":"&#x54cd;&#x5e94;&#x5f0f;&#x56fe;&#x50cf;","children":[{"content":"<pre data-lines=\"678,684\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">img</span> {\n  <span class=\"hljs-attribute\">max-width</span>: <span class=\"hljs-number\">100%</span>;\n  <span class=\"hljs-attribute\">height</span>: auto;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"678,684"}}],"payload":{"tag":"h4","lines":"677,678"}},{"content":"&#x54cd;&#x5e94;&#x5f0f;&#x6392;&#x7248;","children":[{"content":"<pre data-lines=\"686,691\"><code class=\"language-css\"><span class=\"hljs-selector-tag\">h1</span> {\n  <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-built_in\">clamp</span>(<span class=\"hljs-number\">1.5rem</span>, <span class=\"hljs-number\">5vw</span>, <span class=\"hljs-number\">3rem</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"686,691"}}],"payload":{"tag":"h4","lines":"685,686"}}],"payload":{"tag":"h3","lines":"660,661"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"&#x4f7f;&#x7528;&#x76f8;&#x5bf9;&#x5355;&#x4f4d;&#x8fdb;&#x884c;&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;","children":[],"payload":{"tag":"li","lines":"693,694"}},{"content":"&#x4f7f;&#x7528;clamp()&#x521b;&#x5efa;&#x6d41;&#x4f53;&#x6392;&#x7248;","children":[],"payload":{"tag":"li","lines":"694,695"}},{"content":"&#x4e3a;&#x56fe;&#x50cf;&#x8bbe;&#x7f6e;&#x6700;&#x5927;&#x5bbd;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"695,696"}},{"content":"&#x4f7f;&#x7528;min()&#x548c;max()&#x51fd;&#x6570;&#x7b80;&#x5316;&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;","children":[],"payload":{"tag":"li","lines":"696,697"}},{"content":"&#x4f7f;&#x7528;aspect-ratio&#x7ef4;&#x6301;&#x5143;&#x7d20;&#x6bd4;&#x4f8b;","children":[],"payload":{"tag":"li","lines":"697,698"}},{"content":"&#x4f7f;&#x7528;border-box&#x7b80;&#x5316;&#x76d2;&#x6a21;&#x578b;&#x8ba1;&#x7b97;","children":[],"payload":{"tag":"li","lines":"698,700"}}],"payload":{"tag":"h3","lines":"692,693"}}],"payload":{"tag":"h2","lines":"531,532"}},{"content":"z-index","children":[{"content":"&#x57fa;&#x7840;&#x6982;&#x5ff5;","children":[{"content":"&#x63a7;&#x5236;&#x5b9a;&#x4f4d;&#x5143;&#x7d20;&#x7684;&#x5806;&#x53e0;&#x987a;&#x5e8f;","children":[],"payload":{"tag":"li","lines":"703,704"}},{"content":"&#x53ea;&#x9002;&#x7528;&#x4e8e;&#x5df2;&#x5b9a;&#x4f4d;&#x5143;&#x7d20;&#xff08;position&#x503c;&#x4e3a;relative&#x3001;absolute&#x3001;fixed&#x6216;sticky&#xff09;","children":[],"payload":{"tag":"li","lines":"704,705"}},{"content":"&#x53ef;&#x63a5;&#x53d7;&#x7684;&#x503c;","children":[{"content":"auto&#xff1a;&#x9ed8;&#x8ba4;&#x503c;&#xff0c;&#x4e0d;&#x521b;&#x5efa;&#x65b0;&#x7684;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;","children":[],"payload":{"tag":"li","lines":"706,707"}},{"content":"&#x6574;&#x6570;&#x503c;&#xff1a;&#x6b63;&#x6570;&#x6216;&#x8d1f;&#x6570;&#xff0c;&#x6570;&#x503c;&#x8d8a;&#x5927;&#x8d8a;&#x9760;&#x524d;","children":[],"payload":{"tag":"li","lines":"707,708"}},{"content":"initial&#xff1a;&#x8bbe;&#x7f6e;&#x4e3a;&#x9ed8;&#x8ba4;&#x503c;auto","children":[],"payload":{"tag":"li","lines":"708,709"}},{"content":"inherit&#xff1a;&#x7ee7;&#x627f;&#x7236;&#x5143;&#x7d20;&#x7684;z-index&#x503c;","children":[],"payload":{"tag":"li","lines":"709,711"}}],"payload":{"tag":"li","lines":"705,711"}}],"payload":{"tag":"h3","lines":"702,703"}},{"content":"&#x5b9e;&#x7528;&#x6280;&#x5de7;","children":[{"content":"&#x4f7f;&#x7528;&#x53d8;&#x91cf;&#x7ba1;&#x7406;z-index&#x5c42;&#x7ea7;","children":[],"payload":{"tag":"li","lines":"712,713"}},{"content":"&#x521b;&#x5efa;&#x95f4;&#x8ddd;&#x6bd4;&#x4f8b;&#x7cfb;&#x7edf;","children":[],"payload":{"tag":"li","lines":"713,714"}},{"content":"&#x6784;&#x5efa;&#x989c;&#x8272;&#x8c03;&#x8272;&#x677f;","children":[],"payload":{"tag":"li","lines":"714,715"}},{"content":"&#x5b9e;&#x73b0;&#x54cd;&#x5e94;&#x5f0f;&#x6392;&#x7248;","children":[],"payload":{"tag":"li","lines":"715,716"}},{"content":"&#x7b80;&#x5316;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x903b;&#x8f91;","children":[],"payload":{"tag":"li","lines":"716,718"}}],"payload":{"tag":"h3","lines":"711,712"}},{"content":"&#x5806;&#x53e0;&#x987a;&#x5e8f;","children":[{"content":"&#x4ece;&#x540e;&#x5230;&#x524d;&#x7684;&#x9ed8;&#x8ba4;&#x987a;&#x5e8f;&#xff08;&#x65e0;z-index&#x65f6;&#xff09;","children":[{"content":"1. &#x6839;&#x5143;&#x7d20;&#x7684;&#x80cc;&#x666f;&#x548c;&#x8fb9;&#x6846;","children":[],"payload":{"tag":"li","lines":"720,721","listIndex":1}},{"content":"2. &#x8d1f;z-index&#x503c;&#x7684;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"721,722","listIndex":2}},{"content":"3. &#x975e;&#x5b9a;&#x4f4d;&#x7684;&#x5757;&#x7ea7;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"722,723","listIndex":3}},{"content":"4. &#x6d6e;&#x52a8;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"723,724","listIndex":4}},{"content":"5. &#x884c;&#x5185;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"724,725","listIndex":5}},{"content":"6. z-index&#x4e3a;auto&#x6216;0&#x7684;&#x5b9a;&#x4f4d;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"725,726","listIndex":6}},{"content":"7. &#x6b63;z-index&#x503c;&#x7684;&#x5b9a;&#x4f4d;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"726,728","listIndex":7}}],"payload":{"tag":"li","lines":"719,728"}}],"payload":{"tag":"h3","lines":"718,719"}},{"content":"&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;","children":[{"content":"\n<p data-lines=\"729,730\">&#x5b9a;&#x4e49;</p>","children":[{"content":"HTML&#x5143;&#x7d20;&#x7684;&#x4e09;&#x7ef4;&#x6982;&#x5ff5;&#xff0c;&#x6cbf;z&#x8f74;&#x76f8;&#x4e92;&#x91cd;&#x53e0;","children":[],"payload":{"tag":"li","lines":"730,731"}},{"content":"&#x6bcf;&#x4e2a;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;&#x662f;&#x72ec;&#x7acb;&#x7684;&#x5c01;&#x95ed;&#x73af;&#x5883;","children":[],"payload":{"tag":"li","lines":"731,732"}},{"content":"&#x5b50;&#x5143;&#x7d20;&#x7684;z-index&#x53ea;&#x5728;&#x7236;&#x4e0a;&#x4e0b;&#x6587;&#x4e2d;&#x6709;&#x610f;&#x4e49;","children":[],"payload":{"tag":"li","lines":"732,734"}}],"payload":{"tag":"li","lines":"729,734"}},{"content":"\n<p data-lines=\"734,735\">&#x521b;&#x5efa;&#x65b9;&#x5f0f;</p>","children":[{"content":"&#x6587;&#x6863;&#x6839;&#x5143;&#x7d20;&#xff08;<code>&lt;html&gt;</code>&#xff09;","children":[],"payload":{"tag":"li","lines":"735,736"}},{"content":"position&#x4e3a;absolute/relative&#x4e14;z-index&#x4e0d;&#x4e3a;auto&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"736,737"}},{"content":"position&#x4e3a;fixed/sticky&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"737,738"}},{"content":"Flex/Grid&#x5bb9;&#x5668;&#x7684;&#x5b50;&#x5143;&#x7d20;&#x4e14;z-index&#x4e0d;&#x4e3a;auto","children":[],"payload":{"tag":"li","lines":"738,739"}},{"content":"opacity&#x503c;&#x5c0f;&#x4e8e;1&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"739,740"}},{"content":"transform&#x3001;filter&#x3001;backdrop-filter&#x4e0d;&#x4e3a;none&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"740,741"}},{"content":"isolation&#x503c;&#x4e3a;isolate&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"741,742"}},{"content":"will-change&#x6307;&#x5b9a;&#x521b;&#x5efa;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;&#x7684;&#x5c5e;&#x6027;","children":[],"payload":{"tag":"li","lines":"742,743"}},{"content":"contain&#x503c;&#x4e3a;layout&#x3001;paint&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"743,744"}},{"content":"mix-blend-mode&#x4e0d;&#x4e3a;normal&#x7684;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"744,746"}}],"payload":{"tag":"li","lines":"734,746"}},{"content":"\n<p data-lines=\"746,747\">&#x7279;&#x6027;</p>","children":[{"content":"&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;&#x5b8c;&#x5168;&#x72ec;&#x7acb;&#x4e8e;&#x5144;&#x5f1f;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"747,748"}},{"content":"&#x53ef;&#x4ee5;&#x5305;&#x542b;&#x591a;&#x4e2a;&#x5b50;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;","children":[],"payload":{"tag":"li","lines":"748,749"}},{"content":"&#x5c42;&#x7ea7;&#x7531;&#x6587;&#x6863;&#x4f4d;&#x7f6e;&#x548c;z-index&#x503c;&#x51b3;&#x5b9a;","children":[],"payload":{"tag":"li","lines":"749,750"}},{"content":"&#x5b50;&#x4e0a;&#x4e0b;&#x6587;&#x7684;z-index&#x53ea;&#x5728;&#x7236;&#x4e0a;&#x4e0b;&#x6587;&#x4e2d;&#x6709;&#x610f;&#x4e49;","children":[],"payload":{"tag":"li","lines":"750,752"}}],"payload":{"tag":"li","lines":"746,752"}}],"payload":{"tag":"h3","lines":"728,729"}},{"content":"&#x5d4c;&#x5957;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;","children":[{"content":"&#x7236;&#x4e0a;&#x4e0b;&#x6587;&#x7684;z-index&#x51b3;&#x5b9a;&#x6574;&#x4e2a;&#x7ec4;&#x7684;&#x4f4d;&#x7f6e;","children":[],"payload":{"tag":"li","lines":"753,754"}},{"content":"&#x5b50;&#x5143;&#x7d20;&#x65e0;&#x6cd5;&quot;&#x9003;&#x51fa;&quot;&#x7236;&#x4e0a;&#x4e0b;&#x6587;&#x7684;&#x9650;&#x5236;","children":[],"payload":{"tag":"li","lines":"754,755"}},{"content":"&#x5373;&#x4f7f;&#x5b50;&#x5143;&#x7d20;z-index&#x5f88;&#x9ad8;&#xff0c;&#x4e5f;&#x4e0d;&#x4f1a;&#x8d85;&#x8fc7;&#x4f4e;z-index&#x7236;&#x4e0a;&#x4e0b;&#x6587;&#x7684;&#x5144;&#x5f1f;&#x5143;&#x7d20;","children":[],"payload":{"tag":"li","lines":"755,757"}}],"payload":{"tag":"h3","lines":"752,753"}},{"content":"&#x5e38;&#x89c1;&#x95ee;&#x9898;&#x4e0e;&#x89e3;&#x51b3;&#x65b9;&#x6848;","children":[{"content":"\n<p data-lines=\"758,759\">z-index&#x4e0d;&#x751f;&#x6548;</p>\n<pre data-lines=\"759,766\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x6dfb;&#x52a0;&#x5b9a;&#x4f4d;&#x4f7f;z-index&#x751f;&#x6548; */</span>\n<span class=\"hljs-selector-class\">.element</span> {\n  <span class=\"hljs-attribute\">position</span>: relative;\n  <span class=\"hljs-attribute\">z-index</span>: <span class=\"hljs-number\">10</span>;\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"758,767"}},{"content":"\n<p data-lines=\"767,768\">&#x5b50;&#x5143;&#x7d20;&#x65e0;&#x6cd5;&#x5806;&#x53e0;&#x5728;&#x7236;&#x5143;&#x7d20;&#x4e4b;&#x4e0a;</p>\n<pre data-lines=\"768,775\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x79fb;&#x9664;&#x7236;&#x5143;&#x7d20;&#x7684;z-index */</span>\n<span class=\"hljs-selector-class\">.parent</span> {\n  <span class=\"hljs-attribute\">position</span>: relative;\n  <span class=\"hljs-comment\">/* &#x4e0d;&#x8bbe;&#x7f6e;z-index */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"767,776"}},{"content":"\n<p data-lines=\"776,777\">&#x521b;&#x5efa;&#x9694;&#x79bb;&#x7684;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;</p>\n<pre data-lines=\"777,782\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.isolated</span> {\n  <span class=\"hljs-attribute\">isolation</span>: isolate;\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"776,783"}}],"payload":{"tag":"h3","lines":"757,758"}},{"content":"&#x5b9e;&#x9645;&#x5e94;&#x7528;","children":[{"content":"\n<p data-lines=\"784,785\">&#x6a21;&#x6001;&#x5bf9;&#x8bdd;&#x6846;</p>\n<pre data-lines=\"785,789\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.modal-backdrop</span> { <span class=\"hljs-attribute\">z-index</span>: <span class=\"hljs-number\">1000</span>; }\n<span class=\"hljs-selector-class\">.modal</span> { <span class=\"hljs-attribute\">z-index</span>: <span class=\"hljs-number\">1001</span>; }\n</code></pre>","children":[],"payload":{"tag":"li","lines":"784,790"}},{"content":"\n<p data-lines=\"790,791\">&#x4e0b;&#x62c9;&#x83dc;&#x5355;</p>\n<pre data-lines=\"791,794\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.dropdown-menu</span> { <span class=\"hljs-attribute\">z-index</span>: <span class=\"hljs-number\">100</span>; }\n</code></pre>","children":[],"payload":{"tag":"li","lines":"790,795"}},{"content":"\n<p data-lines=\"795,796\">&#x56fa;&#x5b9a;&#x5bfc;&#x822a;&#x680f;</p>\n<pre data-lines=\"796,799\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.navbar</span> { <span class=\"hljs-attribute\">z-index</span>: <span class=\"hljs-number\">900</span>; }\n</code></pre>","children":[],"payload":{"tag":"li","lines":"795,800"}},{"content":"\n<p data-lines=\"800,801\">&#x5de5;&#x5177;&#x63d0;&#x793a;</p>\n<pre data-lines=\"801,804\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.tooltip</span> { <span class=\"hljs-attribute\">z-index</span>: <span class=\"hljs-number\">200</span>; }\n</code></pre>","children":[],"payload":{"tag":"li","lines":"800,805"}}],"payload":{"tag":"h3","lines":"783,784"}},{"content":"&#x4f7f;&#x7528;CSS&#x53d8;&#x91cf;&#x7ba1;&#x7406;z-index","children":[{"content":"<pre data-lines=\"806,815\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--z-index-dropdown</span>: <span class=\"hljs-number\">100</span>;\n  <span class=\"hljs-attr\">--z-index-sticky</span>: <span class=\"hljs-number\">200</span>;\n  <span class=\"hljs-attr\">--z-index-modal</span>: <span class=\"hljs-number\">500</span>;\n}\n\n<span class=\"hljs-selector-class\">.dropdown</span> { <span class=\"hljs-attribute\">z-index</span>: <span class=\"hljs-built_in\">var</span>(--z-index-dropdown); }\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"806,815"}}],"payload":{"tag":"h3","lines":"805,806"}},{"content":"&#x8c03;&#x8bd5;&#x6280;&#x5de7;","children":[{"content":"&#x4f7f;&#x7528;&#x6d4f;&#x89c8;&#x5668;&#x5f00;&#x53d1;&#x8005;&#x5de5;&#x5177;","children":[],"payload":{"tag":"li","lines":"817,818"}},{"content":"&#x68c0;&#x67e5;&#x5143;&#x7d20;&#x662f;&#x5426;&#x521b;&#x5efa;&#x4e86;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;","children":[],"payload":{"tag":"li","lines":"818,819"}},{"content":"&#x53ef;&#x89c6;&#x5316;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;&#xff08;&#x4f7f;&#x7528;outline&#x6216;3D&#x53d8;&#x6362;&#xff09;","children":[],"payload":{"tag":"li","lines":"819,821"}}],"payload":{"tag":"h3","lines":"816,817"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"&#x907f;&#x514d;&#x4f7f;&#x7528;&#x8fc7;&#x5927;&#x7684;z-index&#x503c;","children":[],"payload":{"tag":"li","lines":"822,823"}},{"content":"&#x4f7f;&#x7528;CSS&#x53d8;&#x91cf;&#x5b9a;&#x4e49;z-index&#x5c42;&#x7ea7;","children":[],"payload":{"tag":"li","lines":"823,824"}},{"content":"&#x4e86;&#x89e3;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;&#x7684;&#x5f62;&#x6210;&#x6761;&#x4ef6;","children":[],"payload":{"tag":"li","lines":"824,825"}},{"content":"&#x4f7f;&#x7528;isolation: isolate&#x521b;&#x5efa;&#x65b0;&#x7684;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;","children":[],"payload":{"tag":"li","lines":"825,826"}},{"content":"&#x5efa;&#x7acb;&#x6e05;&#x6670;&#x7684;z-index&#x7ba1;&#x7406;&#x7cfb;&#x7edf;","children":[],"payload":{"tag":"li","lines":"826,827"}},{"content":"&#x907f;&#x514d;&#x6df1;&#x5c42;&#x5d4c;&#x5957;&#x7684;&#x5806;&#x53e0;&#x4e0a;&#x4e0b;&#x6587;","children":[],"payload":{"tag":"li","lines":"827,828"}},{"content":"&#x4f7f;&#x7528;&#x76f8;&#x5bf9;&#x8f83;&#x5c0f;&#x7684;z-index&#x589e;&#x91cf;","children":[],"payload":{"tag":"li","lines":"828,830"}}],"payload":{"tag":"h3","lines":"821,822"}}],"payload":{"tag":"h2","lines":"700,701"}},{"content":"CSS&#x53d8;&#x91cf;&#x4e0e;&#x81ea;&#x5b9a;&#x4e49;&#x5c5e;&#x6027;","children":[{"content":"&#x57fa;&#x7840;&#x6982;&#x5ff5;","children":[{"content":"&#x4f7f;&#x7528;<code>--</code>&#x524d;&#x7f00;&#x5b9a;&#x4e49;&#x53d8;&#x91cf;&#xff1a;<code>--variable-name: value;</code>","children":[],"payload":{"tag":"li","lines":"833,834"}},{"content":"&#x4f7f;&#x7528;<code>var()</code>&#x51fd;&#x6570;&#x5f15;&#x7528;&#x53d8;&#x91cf;&#xff1a;<code>property: var(--variable-name);</code>","children":[],"payload":{"tag":"li","lines":"834,835"}},{"content":"&#x4f5c;&#x7528;&#x57df;&#xff1a;&#x9075;&#x5faa;CSS&#x5c42;&#x53e0;&#x89c4;&#x5219;&#xff0c;&#x901a;&#x5e38;&#x5728;<code>:root</code>&#x4e2d;&#x5b9a;&#x4e49;&#x5168;&#x5c40;&#x53d8;&#x91cf;","children":[],"payload":{"tag":"li","lines":"835,837"}}],"payload":{"tag":"h3","lines":"832,833"}},{"content":"&#x53d8;&#x91cf;&#x5b9a;&#x4e49;","children":[{"content":"<pre data-lines=\"838,846\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--primary-color</span>: <span class=\"hljs-number\">#3498db</span>;\n  <span class=\"hljs-attr\">--spacing-unit</span>: <span class=\"hljs-number\">8px</span>;\n  <span class=\"hljs-attr\">--font-size-base</span>: <span class=\"hljs-number\">16px</span>;\n  <span class=\"hljs-attr\">--border-radius</span>: <span class=\"hljs-number\">4px</span>;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"838,846"}}],"payload":{"tag":"h3","lines":"837,838"}},{"content":"&#x53d8;&#x91cf;&#x4f7f;&#x7528;","children":[{"content":"<pre data-lines=\"848,856\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.button</span> {\n  <span class=\"hljs-attribute\">background-color</span>: <span class=\"hljs-built_in\">var</span>(--primary-color);\n  <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-built_in\">var</span>(--spacing-unit);\n  <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-built_in\">var</span>(--font-size-base);\n  <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-built_in\">var</span>(--border-radius);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"848,856"}}],"payload":{"tag":"h3","lines":"847,848"}},{"content":"&#x53d8;&#x91cf;&#x7ee7;&#x627f;&#x4e0e;&#x8986;&#x76d6;","children":[{"content":"<pre data-lines=\"858,874\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x5168;&#x5c40;&#x53d8;&#x91cf; */</span>\n<span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--text-color</span>: <span class=\"hljs-number\">#333</span>;\n}\n\n<span class=\"hljs-comment\">/* &#x7ec4;&#x4ef6;&#x5185;&#x8986;&#x76d6; */</span>\n<span class=\"hljs-selector-class\">.card</span> {\n  <span class=\"hljs-attr\">--text-color</span>: <span class=\"hljs-number\">#666</span>;\n}\n\n<span class=\"hljs-comment\">/* &#x4f7f;&#x7528;&#x53d8;&#x91cf; */</span>\n<span class=\"hljs-selector-class\">.card-title</span> {\n  <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-built_in\">var</span>(--text-color);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"858,874"}}],"payload":{"tag":"h3","lines":"857,858"}},{"content":"&#x53d8;&#x91cf;&#x56de;&#x9000;&#x503c;","children":[{"content":"<pre data-lines=\"876,882\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.element</span> {\n  <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-built_in\">var</span>(--undefined-var, <span class=\"hljs-number\">#999</span>); <span class=\"hljs-comment\">/* &#x5982;&#x679c;&#x53d8;&#x91cf;&#x672a;&#x5b9a;&#x4e49;&#xff0c;&#x4f7f;&#x7528;#999 */</span>\n  <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-built_in\">var</span>(--spacing, <span class=\"hljs-number\">10px</span> <span class=\"hljs-number\">15px</span>); <span class=\"hljs-comment\">/* &#x590d;&#x5408;&#x503c;&#x56de;&#x9000; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"876,882"}}],"payload":{"tag":"h3","lines":"875,876"}},{"content":"&#x53d8;&#x91cf;&#x8ba1;&#x7b97;","children":[{"content":"<pre data-lines=\"884,890\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--base-size</span>: <span class=\"hljs-number\">16px</span>;\n  <span class=\"hljs-attr\">--large-size</span>: <span class=\"hljs-built_in\">calc</span>(<span class=\"hljs-built_in\">var</span>(--base-size) * <span class=\"hljs-number\">1.5</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"884,890"}}],"payload":{"tag":"h3","lines":"883,884"}},{"content":"&#x52a8;&#x6001;&#x66f4;&#x65b0;&#x53d8;&#x91cf;","children":[{"content":"<pre data-lines=\"892,896\"><code class=\"language-javascript\"><span class=\"hljs-comment\">// &#x901a;&#x8fc7;JavaScript&#x52a8;&#x6001;&#x4fee;&#x6539;&#x53d8;&#x91cf;</span>\n<span class=\"hljs-variable language_\">document</span>.<span class=\"hljs-property\">documentElement</span>.<span class=\"hljs-property\">style</span>.<span class=\"hljs-title function_\">setProperty</span>(<span class=\"hljs-string\">&apos;--primary-color&apos;</span>, <span class=\"hljs-string\">&apos;#ff0000&apos;</span>);\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"892,896"}}],"payload":{"tag":"h3","lines":"891,892"}},{"content":"&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x4e2d;&#x7684;&#x53d8;&#x91cf;","children":[{"content":"<pre data-lines=\"898,909\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--font-size</span>: <span class=\"hljs-number\">16px</span>;\n}\n\n<span class=\"hljs-keyword\">@media</span> (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">768px</span>) {\n  <span class=\"hljs-selector-pseudo\">:root</span> {\n    <span class=\"hljs-attr\">--font-size</span>: <span class=\"hljs-number\">18px</span>;\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"898,909"}}],"payload":{"tag":"h3","lines":"897,898"}},{"content":"&#x4e3b;&#x9898;&#x5207;&#x6362;","children":[{"content":"<pre data-lines=\"911,929\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x4eae;&#x8272;&#x4e3b;&#x9898; */</span>\n<span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--bg-color</span>: <span class=\"hljs-number\">#fff</span>;\n  <span class=\"hljs-attr\">--text-color</span>: <span class=\"hljs-number\">#333</span>;\n}\n\n<span class=\"hljs-comment\">/* &#x6697;&#x8272;&#x4e3b;&#x9898; */</span>\n<span class=\"hljs-selector-attr\">[data-theme=<span class=\"hljs-string\">&quot;dark&quot;</span>]</span> {\n  <span class=\"hljs-attr\">--bg-color</span>: <span class=\"hljs-number\">#222</span>;\n  <span class=\"hljs-attr\">--text-color</span>: <span class=\"hljs-number\">#eee</span>;\n}\n\n<span class=\"hljs-selector-tag\">body</span> {\n  <span class=\"hljs-attribute\">background-color</span>: <span class=\"hljs-built_in\">var</span>(--bg-color);\n  <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-built_in\">var</span>(--text-color);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"911,929"}}],"payload":{"tag":"h3","lines":"910,911"}},{"content":"&#x53d8;&#x91cf;&#x4e0e;CSS&#x51fd;&#x6570;&#x7ed3;&#x5408;","children":[{"content":"<pre data-lines=\"931,940\"><code class=\"language-css\"><span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-attr\">--blur-amount</span>: <span class=\"hljs-number\">5px</span>;\n}\n\n<span class=\"hljs-selector-class\">.image</span> {\n  <span class=\"hljs-attribute\">filter</span>: <span class=\"hljs-built_in\">blur</span>(<span class=\"hljs-built_in\">var</span>(--blur-amount));\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"931,940"}}],"payload":{"tag":"h3","lines":"930,931"}},{"content":"&#x53d8;&#x91cf;&#x7c7b;&#x578b;","children":[{"content":"&#x989c;&#x8272;&#x503c;&#xff1a;<code>--color: #ff0000;</code>","children":[],"payload":{"tag":"li","lines":"942,943"}},{"content":"&#x5c3a;&#x5bf8;&#x503c;&#xff1a;<code>--spacing: 10px;</code>","children":[],"payload":{"tag":"li","lines":"943,944"}},{"content":"&#x6570;&#x5b57;&#xff1a;<code>--columns: 3;</code>","children":[],"payload":{"tag":"li","lines":"944,945"}},{"content":"&#x5b57;&#x7b26;&#x4e32;&#xff1a;<code>--content: &quot;Hello&quot;;</code>","children":[],"payload":{"tag":"li","lines":"945,946"}},{"content":"&#x590d;&#x5408;&#x503c;&#xff1a;<code>--shadow: 0 2px 4px rgba(0,0,0,0.1);</code>","children":[],"payload":{"tag":"li","lines":"946,948"}}],"payload":{"tag":"h3","lines":"941,942"}},{"content":"&#x53d8;&#x91cf;&#x547d;&#x540d;&#x89c4;&#x8303;","children":[{"content":"&#x8bed;&#x4e49;&#x5316;&#x547d;&#x540d;&#xff1a;<code>--primary-color</code>&#x800c;&#x975e;<code>--blue</code>","children":[],"payload":{"tag":"li","lines":"949,950"}},{"content":"&#x547d;&#x540d;&#x7a7a;&#x95f4;&#xff1a;<code>--button-padding</code>&#x3001;<code>--card-shadow</code>","children":[],"payload":{"tag":"li","lines":"950,951"}},{"content":"&#x4e00;&#x81f4;&#x6027;&#xff1a;&#x6574;&#x4e2a;&#x9879;&#x76ee;&#x4f7f;&#x7528;&#x76f8;&#x540c;&#x7684;&#x547d;&#x540d;&#x7ea6;&#x5b9a;","children":[],"payload":{"tag":"li","lines":"951,953"}}],"payload":{"tag":"h3","lines":"948,949"}},{"content":"&#x6027;&#x80fd;&#x8003;&#x8651;","children":[{"content":"&#x53d8;&#x91cf;&#x8ba1;&#x7b97;&#x5728;&#x8fd0;&#x884c;&#x65f6;&#x8fdb;&#x884c;","children":[],"payload":{"tag":"li","lines":"954,955"}},{"content":"&#x907f;&#x514d;&#x8fc7;&#x5ea6;&#x590d;&#x6742;&#x7684;&#x53d8;&#x91cf;&#x5d4c;&#x5957;","children":[],"payload":{"tag":"li","lines":"955,956"}},{"content":"&#x53d8;&#x91cf;&#x53d8;&#x5316;&#x4f1a;&#x89e6;&#x53d1;&#x91cd;&#x7ed8;","children":[],"payload":{"tag":"li","lines":"956,958"}}],"payload":{"tag":"h3","lines":"953,954"}},{"content":"&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;","children":[{"content":"&#x73b0;&#x4ee3;&#x6d4f;&#x89c8;&#x5668;&#x5168;&#x9762;&#x652f;&#x6301;","children":[],"payload":{"tag":"li","lines":"959,960"}},{"content":"&#x65e7;&#x7248;&#x6d4f;&#x89c8;&#x5668;&#x9700;&#x8981;&#x56de;&#x9000;&#x65b9;&#x6848;&#xff1a;<pre data-lines=\"961,967\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.fallback</span> {\n  <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-number\">#333</span>; <span class=\"hljs-comment\">/* &#x56de;&#x9000;&#x503c; */</span>\n  <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-built_in\">var</span>(--text-color, <span class=\"hljs-number\">#333</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"960,968"}}],"payload":{"tag":"h3","lines":"958,959"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"1. &#x5728;<code>:root</code>&#x4e2d;&#x5b9a;&#x4e49;&#x5168;&#x5c40;&#x53d8;&#x91cf;","children":[],"payload":{"tag":"li","lines":"969,970","listIndex":1}},{"content":"2. &#x4e3a;&#x7ec4;&#x4ef6;&#x5b9a;&#x4e49;&#x5c40;&#x90e8;&#x53d8;&#x91cf;","children":[],"payload":{"tag":"li","lines":"970,971","listIndex":2}},{"content":"3. &#x63d0;&#x4f9b;&#x6709;&#x610f;&#x4e49;&#x7684;&#x56de;&#x9000;&#x503c;","children":[],"payload":{"tag":"li","lines":"971,972","listIndex":3}},{"content":"4. &#x4f7f;&#x7528;&#x8bed;&#x4e49;&#x5316;&#x547d;&#x540d;","children":[],"payload":{"tag":"li","lines":"972,973","listIndex":4}},{"content":"5. &#x907f;&#x514d;&#x8fc7;&#x5ea6;&#x5d4c;&#x5957;&#x53d8;&#x91cf;&#x8ba1;&#x7b97;","children":[],"payload":{"tag":"li","lines":"973,974","listIndex":5}},{"content":"6. &#x8003;&#x8651;&#x4e3b;&#x9898;&#x5207;&#x6362;&#x9700;&#x6c42;","children":[],"payload":{"tag":"li","lines":"974,975","listIndex":6}},{"content":"7. &#x4e3a;&#x65e7;&#x7248;&#x6d4f;&#x89c8;&#x5668;&#x63d0;&#x4f9b;&#x56de;&#x9000;","children":[],"payload":{"tag":"li","lines":"975,977","listIndex":7}}],"payload":{"tag":"h3","lines":"968,969"}}],"payload":{"tag":"h2","lines":"830,831"}},{"content":"CSS&#x52a8;&#x753b;&#x4e0e;&#x8fc7;&#x6e21;","children":[{"content":"&#x57fa;&#x7840;&#x6982;&#x5ff5;","children":[{"content":"<strong>&#x8fc7;&#x6e21;(Transition)</strong>&#xff1a;&#x5c5e;&#x6027;&#x503c;&#x968f;&#x65f6;&#x95f4;&#x5e73;&#x6ed1;&#x53d8;&#x5316;","children":[],"payload":{"tag":"li","lines":"980,981"}},{"content":"<strong>&#x52a8;&#x753b;(Animation)</strong>&#xff1a;&#x901a;&#x8fc7;&#x5173;&#x952e;&#x5e27;&#x5b9a;&#x4e49;&#x590d;&#x6742;&#x52a8;&#x753b;&#x5e8f;&#x5217;","children":[],"payload":{"tag":"li","lines":"981,982"}},{"content":"<strong>&#x6027;&#x80fd;&#x8003;&#x8651;</strong>&#xff1a;&#x4f18;&#x5148;&#x4f7f;&#x7528;opacity&#x548c;transform&#x52a8;&#x753b;","children":[],"payload":{"tag":"li","lines":"982,984"}}],"payload":{"tag":"h3","lines":"979,980"}},{"content":"CSS&#x8fc7;&#x6e21;(Transition)","children":[{"content":"&#x57fa;&#x672c;&#x8bed;&#x6cd5;","children":[{"content":"<pre data-lines=\"986,991\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.element</span> {\n  <span class=\"hljs-attribute\">transition</span>: property duration timing-function delay;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"986,991"}}],"payload":{"tag":"h4","lines":"985,986"}},{"content":"&#x8fc7;&#x6e21;&#x5c5e;&#x6027;","children":[{"content":"<code>transition-property</code>&#xff1a;&#x6307;&#x5b9a;&#x8981;&#x8fc7;&#x6e21;&#x7684;&#x5c5e;&#x6027;&#xff08;&#x5982;<code>all</code>, <code>opacity</code>, <code>transform</code>&#xff09;","children":[],"payload":{"tag":"li","lines":"993,994"}},{"content":"<code>transition-duration</code>&#xff1a;&#x8fc7;&#x6e21;&#x6301;&#x7eed;&#x65f6;&#x95f4;&#xff08;&#x5982;<code>0.3s</code>&#xff09;","children":[],"payload":{"tag":"li","lines":"994,995"}},{"content":"<code>transition-timing-function</code>&#xff1a;&#x901f;&#x5ea6;&#x66f2;&#x7ebf;&#xff08;&#x5982;<code>ease</code>, <code>linear</code>, <code>cubic-bezier()</code>&#xff09;","children":[],"payload":{"tag":"li","lines":"995,996"}},{"content":"<code>transition-delay</code>&#xff1a;&#x8fc7;&#x6e21;&#x5f00;&#x59cb;&#x524d;&#x7684;&#x5ef6;&#x8fdf;&#x65f6;&#x95f4;","children":[],"payload":{"tag":"li","lines":"996,998"}}],"payload":{"tag":"h4","lines":"992,993"}},{"content":"&#x793a;&#x4f8b;","children":[{"content":"<pre data-lines=\"999,1010\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.button</span> {\n  <span class=\"hljs-attribute\">background</span>: <span class=\"hljs-number\">#3498db</span>;\n  <span class=\"hljs-attribute\">transition</span>: background <span class=\"hljs-number\">0.3s</span> ease, transform <span class=\"hljs-number\">0.2s</span> <span class=\"hljs-built_in\">cubic-bezier</span>(<span class=\"hljs-number\">0.4</span>, <span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">0.2</span>, <span class=\"hljs-number\">1</span>);\n}\n\n<span class=\"hljs-selector-class\">.button</span><span class=\"hljs-selector-pseudo\">:hover</span> {\n  <span class=\"hljs-attribute\">background</span>: <span class=\"hljs-number\">#2980b9</span>;\n  <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">translateY</span>(-<span class=\"hljs-number\">2px</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"999,1010"}}],"payload":{"tag":"h4","lines":"998,999"}},{"content":"&#x591a;&#x5c5e;&#x6027;&#x8fc7;&#x6e21;","children":[{"content":"<pre data-lines=\"1012,1020\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.card</span> {\n  <span class=\"hljs-attribute\">transition</span>: \n    box-shadow <span class=\"hljs-number\">0.3s</span> ease,\n    transform <span class=\"hljs-number\">0.2s</span> ease-out,\n    opacity <span class=\"hljs-number\">0.4s</span> linear <span class=\"hljs-number\">0.1s</span>;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1012,1020"}}],"payload":{"tag":"h4","lines":"1011,1012"}}],"payload":{"tag":"h3","lines":"984,985"}},{"content":"CSS&#x52a8;&#x753b;(Animation)","children":[{"content":"&#x5173;&#x952e;&#x5e27;&#x5b9a;&#x4e49;","children":[{"content":"<pre data-lines=\"1023,1035\"><code class=\"language-css\"><span class=\"hljs-keyword\">@keyframes</span> slideIn {\n  <span class=\"hljs-selector-tag\">from</span> {\n    <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">translateX</span>(-<span class=\"hljs-number\">100%</span>);\n    <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">0</span>;\n  }\n  <span class=\"hljs-selector-tag\">to</span> {\n    <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">translateX</span>(<span class=\"hljs-number\">0</span>);\n    <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">1</span>;\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1023,1035"}}],"payload":{"tag":"h4","lines":"1022,1023"}},{"content":"&#x52a8;&#x753b;&#x5c5e;&#x6027;","children":[{"content":"<code>animation-name</code>&#xff1a;&#x5173;&#x952e;&#x5e27;&#x540d;&#x79f0;","children":[],"payload":{"tag":"li","lines":"1037,1038"}},{"content":"<code>animation-duration</code>&#xff1a;&#x52a8;&#x753b;&#x6301;&#x7eed;&#x65f6;&#x95f4;","children":[],"payload":{"tag":"li","lines":"1038,1039"}},{"content":"<code>animation-timing-function</code>&#xff1a;&#x901f;&#x5ea6;&#x66f2;&#x7ebf;","children":[],"payload":{"tag":"li","lines":"1039,1040"}},{"content":"<code>animation-delay</code>&#xff1a;&#x52a8;&#x753b;&#x5f00;&#x59cb;&#x524d;&#x7684;&#x5ef6;&#x8fdf;","children":[],"payload":{"tag":"li","lines":"1040,1041"}},{"content":"<code>animation-iteration-count</code>&#xff1a;&#x91cd;&#x590d;&#x6b21;&#x6570;&#xff08;<code>infinite</code>&#x8868;&#x793a;&#x65e0;&#x9650;&#x5faa;&#x73af;&#xff09;","children":[],"payload":{"tag":"li","lines":"1041,1042"}},{"content":"<code>animation-direction</code>&#xff1a;&#x64ad;&#x653e;&#x65b9;&#x5411;&#xff08;<code>normal</code>, <code>reverse</code>, <code>alternate</code>&#xff09;","children":[],"payload":{"tag":"li","lines":"1042,1043"}},{"content":"<code>animation-fill-mode</code>&#xff1a;&#x52a8;&#x753b;&#x524d;&#x540e;&#x7684;&#x6837;&#x5f0f;&#x72b6;&#x6001;","children":[],"payload":{"tag":"li","lines":"1043,1044"}},{"content":"<code>animation-play-state</code>&#xff1a;&#x63a7;&#x5236;&#x52a8;&#x753b;&#x64ad;&#x653e;/&#x6682;&#x505c;","children":[],"payload":{"tag":"li","lines":"1044,1046"}}],"payload":{"tag":"h4","lines":"1036,1037"}},{"content":"&#x793a;&#x4f8b;","children":[{"content":"<pre data-lines=\"1047,1062\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.slide-in</span> {\n  <span class=\"hljs-attribute\">animation</span>: slideIn <span class=\"hljs-number\">0.5s</span> ease-out both;\n}\n\n<span class=\"hljs-selector-class\">.pulse</span> {\n  <span class=\"hljs-attribute\">animation</span>: \n    pulse <span class=\"hljs-number\">1.5s</span> <span class=\"hljs-built_in\">cubic-bezier</span>(<span class=\"hljs-number\">0.4</span>, <span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">0.6</span>, <span class=\"hljs-number\">1</span>) infinite;\n}\n\n<span class=\"hljs-keyword\">@keyframes</span> pulse {\n  <span class=\"hljs-number\">0%</span>, <span class=\"hljs-number\">100%</span> { <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">1</span>; }\n  <span class=\"hljs-number\">50%</span> { <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">0.5</span>; }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1047,1062"}}],"payload":{"tag":"h4","lines":"1046,1047"}}],"payload":{"tag":"h3","lines":"1021,1022"}},{"content":"&#x6027;&#x80fd;&#x4f18;&#x5316;","children":[{"content":"&#x9ad8;&#x6027;&#x80fd;&#x5c5e;&#x6027;","children":[{"content":"<code>transform</code>&#xff08;translate, scale, rotate&#xff09;","children":[],"payload":{"tag":"li","lines":"1065,1066"}},{"content":"<code>opacity</code>","children":[],"payload":{"tag":"li","lines":"1066,1067"}},{"content":"<code>filter</code>&#xff08;&#x90e8;&#x5206;&#x6d4f;&#x89c8;&#x5668;&#xff09;","children":[],"payload":{"tag":"li","lines":"1067,1069"}}],"payload":{"tag":"h4","lines":"1064,1065"}},{"content":"&#x4f4e;&#x6027;&#x80fd;&#x5c5e;&#x6027;&#xff08;&#x907f;&#x514d;&#x52a8;&#x753b;&#xff09;","children":[{"content":"<code>width</code>, <code>height</code>","children":[],"payload":{"tag":"li","lines":"1070,1071"}},{"content":"<code>margin</code>, <code>padding</code>","children":[],"payload":{"tag":"li","lines":"1071,1072"}},{"content":"<code>top</code>, <code>left</code>&#x7b49;&#x5b9a;&#x4f4d;&#x5c5e;&#x6027;","children":[],"payload":{"tag":"li","lines":"1072,1074"}}],"payload":{"tag":"h4","lines":"1069,1070"}},{"content":"&#x786c;&#x4ef6;&#x52a0;&#x901f;","children":[{"content":"<pre data-lines=\"1075,1081\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.optimized</span> {\n  <span class=\"hljs-attribute\">will-change</span>: transform, opacity;\n  <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">translateZ</span>(<span class=\"hljs-number\">0</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1075,1081"}}],"payload":{"tag":"h4","lines":"1074,1075"}}],"payload":{"tag":"h3","lines":"1063,1064"}},{"content":"&#x5b9e;&#x7528;&#x52a8;&#x753b;&#x793a;&#x4f8b;","children":[{"content":"&#x6de1;&#x5165;&#x6de1;&#x51fa;","children":[{"content":"<pre data-lines=\"1084,1094\"><code class=\"language-css\"><span class=\"hljs-keyword\">@keyframes</span> fade {\n  <span class=\"hljs-selector-tag\">from</span> { <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">0</span>; }\n  <span class=\"hljs-selector-tag\">to</span> { <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">1</span>; }\n}\n\n<span class=\"hljs-selector-class\">.fade-in</span> {\n  <span class=\"hljs-attribute\">animation</span>: fade <span class=\"hljs-number\">0.6s</span> ease-in;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1084,1094"}}],"payload":{"tag":"h4","lines":"1083,1084"}},{"content":"&#x5f39;&#x8df3;&#x6548;&#x679c;","children":[{"content":"<pre data-lines=\"1096,1106\"><code class=\"language-css\"><span class=\"hljs-keyword\">@keyframes</span> bounce {\n  <span class=\"hljs-number\">0%</span>, <span class=\"hljs-number\">100%</span> { <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">translateY</span>(<span class=\"hljs-number\">0</span>); }\n  <span class=\"hljs-number\">50%</span> { <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">translateY</span>(-<span class=\"hljs-number\">20px</span>); }\n}\n\n<span class=\"hljs-selector-class\">.bounce</span> {\n  <span class=\"hljs-attribute\">animation</span>: bounce <span class=\"hljs-number\">0.5s</span> infinite;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1096,1106"}}],"payload":{"tag":"h4","lines":"1095,1096"}},{"content":"&#x52a0;&#x8f7d;&#x65cb;&#x8f6c;&#x5668;","children":[{"content":"<pre data-lines=\"1108,1120\"><code class=\"language-css\"><span class=\"hljs-keyword\">@keyframes</span> spin {\n  <span class=\"hljs-selector-tag\">to</span> { <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">rotate</span>(<span class=\"hljs-number\">360deg</span>); }\n}\n\n<span class=\"hljs-selector-class\">.spinner</span> {\n  <span class=\"hljs-attribute\">animation</span>: spin <span class=\"hljs-number\">1s</span> linear infinite;\n  <span class=\"hljs-attribute\">border</span>: <span class=\"hljs-number\">3px</span> solid <span class=\"hljs-built_in\">rgba</span>(<span class=\"hljs-number\">0</span>,<span class=\"hljs-number\">0</span>,<span class=\"hljs-number\">0</span>,<span class=\"hljs-number\">0.1</span>);\n  <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">50%</span>;\n  <span class=\"hljs-attribute\">border-top-color</span>: <span class=\"hljs-number\">#3498db</span>;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1108,1120"}}],"payload":{"tag":"h4","lines":"1107,1108"}},{"content":"&#x6253;&#x5b57;&#x6548;&#x679c;","children":[{"content":"<pre data-lines=\"1122,1136\"><code class=\"language-css\"><span class=\"hljs-keyword\">@keyframes</span> typing {\n  <span class=\"hljs-selector-tag\">from</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">0</span> }\n  <span class=\"hljs-selector-tag\">to</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">100%</span> }\n}\n\n<span class=\"hljs-selector-class\">.typewriter</span> {\n  <span class=\"hljs-attribute\">overflow</span>: hidden;\n  <span class=\"hljs-attribute\">white-space</span>: nowrap;\n  <span class=\"hljs-attribute\">animation</span>: \n    typing <span class=\"hljs-number\">3.5s</span> <span class=\"hljs-built_in\">steps</span>(<span class=\"hljs-number\">40</span>, end),\n    blink-caret <span class=\"hljs-number\">0.75s</span> step-end infinite;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1122,1136"}}],"payload":{"tag":"h4","lines":"1121,1122"}}],"payload":{"tag":"h3","lines":"1082,1083"}},{"content":"&#x52a8;&#x753b;&#x4e0e;&#x8fc7;&#x6e21;&#x7ed3;&#x5408;","children":[{"content":"<pre data-lines=\"1138,1150\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.modal</span> {\n  <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">0</span>;\n  <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">scale</span>(<span class=\"hljs-number\">0.9</span>);\n  <span class=\"hljs-attribute\">transition</span>: opacity <span class=\"hljs-number\">0.3s</span>, transform <span class=\"hljs-number\">0.3s</span>;\n}\n\n<span class=\"hljs-selector-class\">.modal</span><span class=\"hljs-selector-class\">.show</span> {\n  <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">1</span>;\n  <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">scale</span>(<span class=\"hljs-number\">1</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1138,1150"}}],"payload":{"tag":"h3","lines":"1137,1138"}},{"content":"&#x54cd;&#x5e94;&#x5f0f;&#x52a8;&#x753b;","children":[{"content":"<pre data-lines=\"1152,1160\"><code class=\"language-css\"><span class=\"hljs-keyword\">@media</span> (<span class=\"hljs-attribute\">prefers-reduced-motion</span>: reduce) {\n  * {\n    <span class=\"hljs-attribute\">animation</span>: none <span class=\"hljs-meta\">!important</span>;\n    <span class=\"hljs-attribute\">transition</span>: none <span class=\"hljs-meta\">!important</span>;\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1152,1160"}}],"payload":{"tag":"h3","lines":"1151,1152"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"1. &#x4f18;&#x5148;&#x4f7f;&#x7528;transform&#x548c;opacity&#x52a8;&#x753b;","children":[],"payload":{"tag":"li","lines":"1162,1163","listIndex":1}},{"content":"2. &#x4e3a;&#x5173;&#x952e;&#x52a8;&#x753b;&#x4f7f;&#x7528;will-change","children":[],"payload":{"tag":"li","lines":"1163,1164","listIndex":2}},{"content":"3. &#x63d0;&#x4f9b;&#x51cf;&#x5c11;&#x52a8;&#x753b;&#x9009;&#x9879;","children":[],"payload":{"tag":"li","lines":"1164,1165","listIndex":3}},{"content":"4. &#x4fdd;&#x6301;&#x52a8;&#x753b;&#x65f6;&#x957f;&#x5728;300ms&#x4ee5;&#x5185;","children":[],"payload":{"tag":"li","lines":"1165,1166","listIndex":4}},{"content":"5. &#x4f7f;&#x7528;&#x5408;&#x9002;&#x7684;&#x7f13;&#x52a8;&#x51fd;&#x6570;","children":[],"payload":{"tag":"li","lines":"1166,1167","listIndex":5}},{"content":"6. &#x907f;&#x514d;&#x8fc7;&#x591a;&#x540c;&#x65f6;&#x8fd0;&#x884c;&#x7684;&#x52a8;&#x753b;","children":[],"payload":{"tag":"li","lines":"1167,1168","listIndex":6}},{"content":"7. &#x6d4b;&#x8bd5;&#x4e0d;&#x540c;&#x8bbe;&#x5907;&#x7684;&#x6027;&#x80fd;","children":[],"payload":{"tag":"li","lines":"1168,1170","listIndex":7}}],"payload":{"tag":"h3","lines":"1161,1162"}},{"content":"&#x8c03;&#x8bd5;&#x6280;&#x5de7;","children":[{"content":"&#x4f7f;&#x7528;&#x6d4f;&#x89c8;&#x5668;&#x5f00;&#x53d1;&#x8005;&#x5de5;&#x5177;&#x7684;Animations&#x9762;&#x677f;","children":[],"payload":{"tag":"li","lines":"1171,1172"}},{"content":"&#x68c0;&#x67e5;&#x91cd;&#x7ed8;&#x548c;&#x56de;&#x6d41;","children":[],"payload":{"tag":"li","lines":"1172,1173"}},{"content":"&#x6d4b;&#x91cf;&#x5e27;&#x7387;(FPS)","children":[],"payload":{"tag":"li","lines":"1173,1175"}}],"payload":{"tag":"h3","lines":"1170,1171"}},{"content":"&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;","children":[{"content":"&#x73b0;&#x4ee3;&#x6d4f;&#x89c8;&#x5668;&#x5168;&#x9762;&#x652f;&#x6301;","children":[],"payload":{"tag":"li","lines":"1176,1177"}},{"content":"&#x524d;&#x7f00;&#x9700;&#x6c42;&#xff1a;<code>-webkit-</code>&#xff08;&#x67d0;&#x4e9b;&#x65e7;&#x7248;&#x6d4f;&#x89c8;&#x5668;&#xff09;","children":[],"payload":{"tag":"li","lines":"1177,1178"}},{"content":"&#x56de;&#x9000;&#x65b9;&#x6848;&#xff1a;<pre data-lines=\"1179,1184\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.fallback</span> {\n  <span class=\"hljs-attribute\">opacity</span>: <span class=\"hljs-number\">1</span>; <span class=\"hljs-comment\">/* &#x65e0;&#x52a8;&#x753b;&#x65f6;&#x7684;&#x72b6;&#x6001; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"li","lines":"1178,1185"}}],"payload":{"tag":"h3","lines":"1175,1176"}}],"payload":{"tag":"h2","lines":"977,978"}},{"content":"CSS&#x53d8;&#x6362;&#x548c;&#x6ee4;&#x955c;","children":[{"content":"&#x53d8;&#x6362;(Transform)","children":[{"content":"2D&#x53d8;&#x6362;","children":[{"content":"<pre data-lines=\"1189,1198\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.transform-2d</span> {\n  <span class=\"hljs-attribute\">transform</span>: \n    <span class=\"hljs-built_in\">translate</span>(<span class=\"hljs-number\">50px</span>, <span class=\"hljs-number\">100px</span>)  <span class=\"hljs-comment\">/* &#x79fb;&#x52a8; */</span>\n    <span class=\"hljs-built_in\">rotate</span>(<span class=\"hljs-number\">45deg</span>)            <span class=\"hljs-comment\">/* &#x65cb;&#x8f6c; */</span>\n    <span class=\"hljs-built_in\">scale</span>(<span class=\"hljs-number\">1.5</span>)              <span class=\"hljs-comment\">/* &#x7f29;&#x653e; */</span>\n    <span class=\"hljs-built_in\">skew</span>(<span class=\"hljs-number\">10deg</span>, <span class=\"hljs-number\">5deg</span>);      <span class=\"hljs-comment\">/* &#x503e;&#x659c; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1189,1198"}}],"payload":{"tag":"h4","lines":"1188,1189"}},{"content":"3D&#x53d8;&#x6362;","children":[{"content":"<pre data-lines=\"1200,1209\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.transform-3d</span> {\n  <span class=\"hljs-attribute\">transform</span>: \n    <span class=\"hljs-built_in\">perspective</span>(<span class=\"hljs-number\">500px</span>)      <span class=\"hljs-comment\">/* &#x900f;&#x89c6;&#x8ddd;&#x79bb; */</span>\n    <span class=\"hljs-built_in\">rotateX</span>(<span class=\"hljs-number\">45deg</span>)          <span class=\"hljs-comment\">/* X&#x8f74;&#x65cb;&#x8f6c; */</span>\n    <span class=\"hljs-built_in\">rotateY</span>(<span class=\"hljs-number\">30deg</span>)          <span class=\"hljs-comment\">/* Y&#x8f74;&#x65cb;&#x8f6c; */</span>\n    <span class=\"hljs-built_in\">translateZ</span>(<span class=\"hljs-number\">100px</span>);     <span class=\"hljs-comment\">/* Z&#x8f74;&#x79fb;&#x52a8; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1200,1209"}}],"payload":{"tag":"h4","lines":"1199,1200"}},{"content":"&#x53d8;&#x6362;&#x539f;&#x70b9;","children":[{"content":"<pre data-lines=\"1211,1216\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.origin</span> {\n  <span class=\"hljs-attribute\">transform-origin</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-number\">0</span>; <span class=\"hljs-comment\">/* &#x5de6;&#x4e0a;&#x89d2; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1211,1216"}}],"payload":{"tag":"h4","lines":"1210,1211"}},{"content":"&#x53d8;&#x6362;&#x6837;&#x5f0f;","children":[{"content":"<pre data-lines=\"1218,1223\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.preserve-3d</span> {\n  <span class=\"hljs-attribute\">transform-style</span>: preserve-<span class=\"hljs-number\">3</span>d; <span class=\"hljs-comment\">/* &#x4fdd;&#x7559;3D&#x7a7a;&#x95f4; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1218,1223"}}],"payload":{"tag":"h4","lines":"1217,1218"}}],"payload":{"tag":"h3","lines":"1187,1188"}},{"content":"&#x6ee4;&#x955c;(Filter)","children":[{"content":"&#x57fa;&#x672c;&#x6ee4;&#x955c;","children":[{"content":"<pre data-lines=\"1226,1240\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.filter</span> {\n  <span class=\"hljs-attribute\">filter</span>: \n    <span class=\"hljs-built_in\">blur</span>(<span class=\"hljs-number\">5px</span>)          <span class=\"hljs-comment\">/* &#x6a21;&#x7cca; */</span>\n    <span class=\"hljs-built_in\">brightness</span>(<span class=\"hljs-number\">0.5</span>)   <span class=\"hljs-comment\">/* &#x4eae;&#x5ea6; */</span>\n    <span class=\"hljs-built_in\">contrast</span>(<span class=\"hljs-number\">200%</span>)     <span class=\"hljs-comment\">/* &#x5bf9;&#x6bd4;&#x5ea6; */</span>\n    <span class=\"hljs-built_in\">grayscale</span>(<span class=\"hljs-number\">50%</span>)     <span class=\"hljs-comment\">/* &#x7070;&#x5ea6; */</span>\n    <span class=\"hljs-built_in\">hue-rotate</span>(<span class=\"hljs-number\">90deg</span>)  <span class=\"hljs-comment\">/* &#x8272;&#x76f8;&#x65cb;&#x8f6c; */</span>\n    <span class=\"hljs-built_in\">invert</span>(<span class=\"hljs-number\">75%</span>)        <span class=\"hljs-comment\">/* &#x53cd;&#x8272; */</span>\n    <span class=\"hljs-built_in\">opacity</span>(<span class=\"hljs-number\">25%</span>)       <span class=\"hljs-comment\">/* &#x900f;&#x660e;&#x5ea6; */</span>\n    <span class=\"hljs-built_in\">saturate</span>(<span class=\"hljs-number\">30%</span>)      <span class=\"hljs-comment\">/* &#x9971;&#x548c;&#x5ea6; */</span>\n    <span class=\"hljs-built_in\">sepia</span>(<span class=\"hljs-number\">60%</span>);        <span class=\"hljs-comment\">/* &#x8910;&#x8272;&#x6ee4;&#x955c; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1226,1240"}}],"payload":{"tag":"h4","lines":"1225,1226"}},{"content":"&#x9634;&#x5f71;&#x6ee4;&#x955c;","children":[{"content":"<pre data-lines=\"1242,1247\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.drop-shadow</span> {\n  <span class=\"hljs-attribute\">filter</span>: <span class=\"hljs-built_in\">drop-shadow</span>(<span class=\"hljs-number\">5px</span> <span class=\"hljs-number\">5px</span> <span class=\"hljs-number\">10px</span> <span class=\"hljs-built_in\">rgba</span>(<span class=\"hljs-number\">0</span>,<span class=\"hljs-number\">0</span>,<span class=\"hljs-number\">0</span>,<span class=\"hljs-number\">0.5</span>));\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1242,1247"}}],"payload":{"tag":"h4","lines":"1241,1242"}},{"content":"&#x591a;&#x6ee4;&#x955c;&#x7ec4;&#x5408;","children":[{"content":"<pre data-lines=\"1249,1257\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.complex-filter</span> {\n  <span class=\"hljs-attribute\">filter</span>: \n    <span class=\"hljs-built_in\">brightness</span>(<span class=\"hljs-number\">1.2</span>) \n    <span class=\"hljs-built_in\">contrast</span>(<span class=\"hljs-number\">0.8</span>) \n    <span class=\"hljs-built_in\">saturate</span>(<span class=\"hljs-number\">1.5</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1249,1257"}}],"payload":{"tag":"h4","lines":"1248,1249"}}],"payload":{"tag":"h3","lines":"1224,1225"}},{"content":"&#x6027;&#x80fd;&#x4f18;&#x5316;","children":[{"content":"<pre data-lines=\"1262,1267\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.optimized</span> {\n  <span class=\"hljs-attribute\">will-change</span>: transform, filter;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1262,1267"}}],"payload":{"tag":"h3","lines":"1258,1259"}},{"content":"&#x5b9e;&#x7528;&#x793a;&#x4f8b;","children":[{"content":"&#x60ac;&#x505c;&#x653e;&#x5927;","children":[{"content":"<pre data-lines=\"1270,1279\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.zoom</span> {\n  <span class=\"hljs-attribute\">transition</span>: transform <span class=\"hljs-number\">0.3s</span>;\n}\n\n<span class=\"hljs-selector-class\">.zoom</span><span class=\"hljs-selector-pseudo\">:hover</span> {\n  <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">scale</span>(<span class=\"hljs-number\">1.1</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1270,1279"}}],"payload":{"tag":"h4","lines":"1269,1270"}},{"content":"&#x5361;&#x7247;3D&#x7ffb;&#x8f6c;","children":[{"content":"<pre data-lines=\"1281,1295\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.flip-card</span> {\n  <span class=\"hljs-attribute\">perspective</span>: <span class=\"hljs-number\">1000px</span>;\n}\n\n<span class=\"hljs-selector-class\">.flip-card-inner</span> {\n  <span class=\"hljs-attribute\">transition</span>: transform <span class=\"hljs-number\">0.6s</span>;\n  <span class=\"hljs-attribute\">transform-style</span>: preserve-<span class=\"hljs-number\">3</span>d;\n}\n\n<span class=\"hljs-selector-class\">.flip-card</span><span class=\"hljs-selector-pseudo\">:hover</span> <span class=\"hljs-selector-class\">.flip-card-inner</span> {\n  <span class=\"hljs-attribute\">transform</span>: <span class=\"hljs-built_in\">rotateY</span>(<span class=\"hljs-number\">180deg</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1281,1295"}}],"payload":{"tag":"h4","lines":"1280,1281"}},{"content":"&#x6bdb;&#x73bb;&#x7483;&#x6548;&#x679c;","children":[{"content":"<pre data-lines=\"1297,1303\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.frosted-glass</span> {\n  <span class=\"hljs-attribute\">backdrop-filter</span>: <span class=\"hljs-built_in\">blur</span>(<span class=\"hljs-number\">10px</span>);\n  <span class=\"hljs-attribute\">background</span>: <span class=\"hljs-built_in\">rgba</span>(<span class=\"hljs-number\">255</span>,<span class=\"hljs-number\">255</span>,<span class=\"hljs-number\">255</span>,<span class=\"hljs-number\">0.5</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1297,1303"}}],"payload":{"tag":"h4","lines":"1296,1297"}}],"payload":{"tag":"h3","lines":"1268,1269"}}],"payload":{"tag":"h2","lines":"1185,1186"}},{"content":"CSS&#x5f62;&#x72b6;&#x4e0e;&#x526a;&#x88c1;","children":[{"content":"&#x5f62;&#x72b6;(Shape)","children":[{"content":"&#x57fa;&#x672c;&#x5f62;&#x72b6;","children":[{"content":"<pre data-lines=\"1308,1324\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.shape</span> {\n  <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">200px</span>;\n  <span class=\"hljs-attribute\">height</span>: <span class=\"hljs-number\">200px</span>;\n  <span class=\"hljs-attribute\">background</span>: <span class=\"hljs-number\">#3498db</span>;\n  \n  <span class=\"hljs-comment\">/* &#x5706;&#x5f62; */</span>\n  <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">50%</span>;\n  \n  <span class=\"hljs-comment\">/* &#x692d;&#x5706; */</span>\n  <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">50%</span> / <span class=\"hljs-number\">30%</span>;\n  \n  <span class=\"hljs-comment\">/* &#x4e09;&#x89d2;&#x5f62; */</span>\n  <span class=\"hljs-attribute\">clip-path</span>: <span class=\"hljs-built_in\">polygon</span>(<span class=\"hljs-number\">50%</span> <span class=\"hljs-number\">0%</span>, <span class=\"hljs-number\">0%</span> <span class=\"hljs-number\">100%</span>, <span class=\"hljs-number\">100%</span> <span class=\"hljs-number\">100%</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1308,1324"}}],"payload":{"tag":"h4","lines":"1307,1308"}},{"content":"&#x5f62;&#x72b6;&#x8f6e;&#x5ed3;(Shape Outside)","children":[{"content":"<pre data-lines=\"1326,1332\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.shape-outside</span> {\n  <span class=\"hljs-attribute\">float</span>: left;\n  <span class=\"hljs-attribute\">shape-outside</span>: <span class=\"hljs-built_in\">circle</span>(<span class=\"hljs-number\">50%</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1326,1332"}}],"payload":{"tag":"h4","lines":"1325,1326"}}],"payload":{"tag":"h3","lines":"1306,1307"}},{"content":"&#x526a;&#x88c1;(Clipping)","children":[{"content":"&#x57fa;&#x672c;&#x526a;&#x88c1;","children":[{"content":"<pre data-lines=\"1335,1344\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.clip</span> {\n  <span class=\"hljs-attribute\">clip-path</span>: \n    <span class=\"hljs-built_in\">circle</span>(<span class=\"hljs-number\">50%</span> at <span class=\"hljs-number\">50%</span> <span class=\"hljs-number\">50%</span>)  <span class=\"hljs-comment\">/* &#x5706;&#x5f62; */</span>\n    <span class=\"hljs-built_in\">polygon</span>(<span class=\"hljs-number\">0</span> <span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">100%</span> <span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">50%</span> <span class=\"hljs-number\">100%</span>) <span class=\"hljs-comment\">/* &#x591a;&#x8fb9;&#x5f62; */</span>\n    <span class=\"hljs-built_in\">inset</span>(<span class=\"hljs-number\">10%</span> <span class=\"hljs-number\">20%</span> <span class=\"hljs-number\">30%</span> <span class=\"hljs-number\">40%</span>)  <span class=\"hljs-comment\">/* &#x5185;&#x5d4c;&#x77e9;&#x5f62; */</span>\n    <span class=\"hljs-built_in\">ellipse</span>(<span class=\"hljs-number\">25%</span> <span class=\"hljs-number\">40%</span> at <span class=\"hljs-number\">50%</span> <span class=\"hljs-number\">50%</span>); <span class=\"hljs-comment\">/* &#x692d;&#x5706; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1335,1344"}}],"payload":{"tag":"h4","lines":"1334,1335"}},{"content":"&#x8def;&#x5f84;&#x526a;&#x88c1;","children":[{"content":"<pre data-lines=\"1346,1351\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.path-clip</span> {\n  <span class=\"hljs-attribute\">clip-path</span>: <span class=\"hljs-built_in\">path</span>(<span class=\"hljs-string\">&apos;M10,10 L100,100 L200,10 Z&apos;</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1346,1351"}}],"payload":{"tag":"h4","lines":"1345,1346"}},{"content":"&#x52a8;&#x753b;&#x526a;&#x88c1;","children":[{"content":"<pre data-lines=\"1353,1363\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.animate-clip</span> {\n  <span class=\"hljs-attribute\">clip-path</span>: <span class=\"hljs-built_in\">circle</span>(<span class=\"hljs-number\">0%</span> at <span class=\"hljs-number\">50%</span> <span class=\"hljs-number\">50%</span>);\n  <span class=\"hljs-attribute\">transition</span>: clip-path <span class=\"hljs-number\">0.5s</span> ease;\n}\n\n<span class=\"hljs-selector-class\">.animate-clip</span><span class=\"hljs-selector-pseudo\">:hover</span> {\n  <span class=\"hljs-attribute\">clip-path</span>: <span class=\"hljs-built_in\">circle</span>(<span class=\"hljs-number\">75%</span> at <span class=\"hljs-number\">50%</span> <span class=\"hljs-number\">50%</span>);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1353,1363"}}],"payload":{"tag":"h4","lines":"1352,1353"}}],"payload":{"tag":"h3","lines":"1333,1334"}},{"content":"&#x906e;&#x7f69;(Mask)","children":[{"content":"&#x56fe;&#x50cf;&#x906e;&#x7f69;","children":[{"content":"<pre data-lines=\"1366,1372\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.image-mask</span> {\n  <span class=\"hljs-attribute\">mask-image</span>: <span class=\"hljs-built_in\">url</span>(<span class=\"hljs-string\">mask.png</span>);\n  <span class=\"hljs-attribute\">mask-mode</span>: alpha;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1366,1372"}}],"payload":{"tag":"h4","lines":"1365,1366"}},{"content":"&#x6e10;&#x53d8;&#x906e;&#x7f69;","children":[{"content":"<pre data-lines=\"1374,1379\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.gradient-mask</span> {\n  <span class=\"hljs-attribute\">mask-image</span>: <span class=\"hljs-built_in\">linear-gradient</span>(to right, transparent, black);\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1374,1379"}}],"payload":{"tag":"h4","lines":"1373,1374"}}],"payload":{"tag":"h3","lines":"1364,1365"}},{"content":"&#x5b9e;&#x7528;&#x793a;&#x4f8b;","children":[{"content":"&#x5706;&#x5f62;&#x5934;&#x50cf;","children":[{"content":"<pre data-lines=\"1382,1390\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.avatar</span> {\n  <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">100px</span>;\n  <span class=\"hljs-attribute\">height</span>: <span class=\"hljs-number\">100px</span>;\n  <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">50%</span>;\n  <span class=\"hljs-attribute\">object-fit</span>: cover;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1382,1390"}}],"payload":{"tag":"h4","lines":"1381,1382"}},{"content":"&#x516d;&#x8fb9;&#x5f62;&#x56fe;&#x7247;","children":[{"content":"<pre data-lines=\"1392,1401\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.hexagon</span> {\n  <span class=\"hljs-attribute\">clip-path</span>: <span class=\"hljs-built_in\">polygon</span>(\n    <span class=\"hljs-number\">50%</span> <span class=\"hljs-number\">0%</span>, <span class=\"hljs-number\">100%</span> <span class=\"hljs-number\">25%</span>, \n    <span class=\"hljs-number\">100%</span> <span class=\"hljs-number\">75%</span>, <span class=\"hljs-number\">50%</span> <span class=\"hljs-number\">100%</span>, \n    <span class=\"hljs-number\">0%</span> <span class=\"hljs-number\">75%</span>, <span class=\"hljs-number\">0%</span> <span class=\"hljs-number\">25%</span>\n  );\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1392,1401"}}],"payload":{"tag":"h4","lines":"1391,1392"}},{"content":"&#x6587;&#x5b57;&#x73af;&#x7ed5;&#x5f62;&#x72b6;","children":[{"content":"<pre data-lines=\"1403,1409\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.wrap-text</span> {\n  <span class=\"hljs-attribute\">shape-outside</span>: <span class=\"hljs-built_in\">url</span>(<span class=\"hljs-string\">image.png</span>);\n  <span class=\"hljs-attribute\">float</span>: left;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1403,1409"}}],"payload":{"tag":"h4","lines":"1402,1403"}}],"payload":{"tag":"h3","lines":"1380,1381"}},{"content":"&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;","children":[{"content":"&#x73b0;&#x4ee3;&#x6d4f;&#x89c8;&#x5668;&#x57fa;&#x672c;&#x652f;&#x6301;","children":[],"payload":{"tag":"li","lines":"1411,1412"}},{"content":"&#x90e8;&#x5206;&#x7279;&#x6027;&#x9700;&#x8981;&#x524d;&#x7f00;","children":[],"payload":{"tag":"li","lines":"1412,1413"}},{"content":"&#x63d0;&#x4f9b;&#x6e10;&#x8fdb;&#x589e;&#x5f3a;&#x65b9;&#x6848;","children":[],"payload":{"tag":"li","lines":"1413,1415"}}],"payload":{"tag":"h3","lines":"1410,1411"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"1. &#x4f18;&#x5148;&#x4f7f;&#x7528;CSS&#x5f62;&#x72b6;&#x800c;&#x975e;&#x56fe;&#x50cf;","children":[],"payload":{"tag":"li","lines":"1416,1417","listIndex":1}},{"content":"2. &#x4e3a;&#x590d;&#x6742;&#x5f62;&#x72b6;&#x63d0;&#x4f9b;&#x56de;&#x9000;&#x65b9;&#x6848;","children":[],"payload":{"tag":"li","lines":"1417,1418","listIndex":2}},{"content":"3. &#x6ce8;&#x610f;&#x6027;&#x80fd;&#x5f71;&#x54cd;","children":[],"payload":{"tag":"li","lines":"1418,1419","listIndex":3}},{"content":"4. &#x6d4b;&#x8bd5;&#x4e0d;&#x540c;&#x6d4f;&#x89c8;&#x5668;&#x7684;&#x6e32;&#x67d3;&#x6548;&#x679c;","children":[],"payload":{"tag":"li","lines":"1419,1420","listIndex":4}},{"content":"5. &#x7ed3;&#x5408;&#x52a8;&#x753b;&#x521b;&#x9020;&#x52a8;&#x6001;&#x6548;&#x679c;","children":[],"payload":{"tag":"li","lines":"1420,1422","listIndex":5}}],"payload":{"tag":"h3","lines":"1415,1416"}}],"payload":{"tag":"h2","lines":"1304,1305"}},{"content":"CSS&#x5bb9;&#x5668;&#x67e5;&#x8be2;","children":[{"content":"&#x57fa;&#x7840;&#x6982;&#x5ff5;","children":[{"content":"&#x6839;&#x636e;&#x5bb9;&#x5668;&#x5c3a;&#x5bf8;&#x800c;&#x975e;&#x89c6;&#x53e3;&#x5c3a;&#x5bf8;&#x5e94;&#x7528;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"1425,1426"}},{"content":"&#x6bd4;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x66f4;&#x7ec6;&#x7c92;&#x5ea6;&#x7684;&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;","children":[],"payload":{"tag":"li","lines":"1426,1427"}},{"content":"&#x9700;&#x8981;&#x5148;&#x5b9a;&#x4e49;&#x5bb9;&#x5668;&#x7c7b;&#x578b;","children":[],"payload":{"tag":"li","lines":"1427,1429"}}],"payload":{"tag":"h3","lines":"1424,1425"}},{"content":"&#x5b9a;&#x4e49;&#x5bb9;&#x5668;","children":[{"content":"<pre data-lines=\"1430,1441\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.container</span> {\n  <span class=\"hljs-attribute\">container-type</span>: inline-size; <span class=\"hljs-comment\">/* &#x57fa;&#x4e8e;&#x5185;&#x8054;&#x5c3a;&#x5bf8; */</span>\n  <span class=\"hljs-attribute\">container-name</span>: sidebar;    <span class=\"hljs-comment\">/* &#x53ef;&#x9009;&#x540d;&#x79f0; */</span>\n}\n\n<span class=\"hljs-comment\">/* &#x7b80;&#x5199; */</span>\n<span class=\"hljs-selector-class\">.container</span> {\n  <span class=\"hljs-attribute\">container</span>: sidebar / inline-size;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1430,1441"}}],"payload":{"tag":"h3","lines":"1429,1430"}},{"content":"&#x5bb9;&#x5668;&#x67e5;&#x8be2;&#x8bed;&#x6cd5;","children":[{"content":"<pre data-lines=\"1443,1460\"><code class=\"language-css\"><span class=\"hljs-keyword\">@container</span> sidebar (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">400px</span>) {\n  <span class=\"hljs-selector-class\">.card</span> {\n    <span class=\"hljs-attribute\">grid-template-columns</span>: <span class=\"hljs-number\">200px</span> <span class=\"hljs-number\">1</span>fr;\n  }\n}\n\n<span class=\"hljs-comment\">/* &#x57fa;&#x4e8e;&#x540d;&#x79f0;&#x67e5;&#x8be2; */</span>\n<span class=\"hljs-keyword\">@container</span> sidebar (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">400px</span>) {\n  <span class=\"hljs-comment\">/* &#x6837;&#x5f0f; */</span>\n}\n\n<span class=\"hljs-comment\">/* &#x533f;&#x540d;&#x5bb9;&#x5668;&#x67e5;&#x8be2; */</span>\n<span class=\"hljs-keyword\">@container</span> (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">400px</span>) {\n  <span class=\"hljs-comment\">/* &#x6837;&#x5f0f; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1443,1460"}}],"payload":{"tag":"h3","lines":"1442,1443"}},{"content":"&#x5bb9;&#x5668;&#x5355;&#x4f4d;","children":[{"content":"cqw&#xff1a;&#x5bb9;&#x5668;&#x5bbd;&#x5ea6;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"1462,1463"}},{"content":"cqh&#xff1a;&#x5bb9;&#x5668;&#x9ad8;&#x5ea6;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"1463,1464"}},{"content":"cqi&#xff1a;&#x5bb9;&#x5668;&#x5185;&#x8054;&#x5c3a;&#x5bf8;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"1464,1465"}},{"content":"cqb&#xff1a;&#x5bb9;&#x5668;&#x5757;&#x5c3a;&#x5bf8;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"1465,1466"}},{"content":"cqmin&#xff1a;&#x5bb9;&#x5668;&#x8f83;&#x5c0f;&#x5c3a;&#x5bf8;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"1466,1467"}},{"content":"cqmax&#xff1a;&#x5bb9;&#x5668;&#x8f83;&#x5927;&#x5c3a;&#x5bf8;&#x7684;1%","children":[],"payload":{"tag":"li","lines":"1467,1469"}}],"payload":{"tag":"h3","lines":"1461,1462"}},{"content":"&#x5b9e;&#x7528;&#x793a;&#x4f8b;","children":[{"content":"&#x54cd;&#x5e94;&#x5f0f;&#x5361;&#x7247;","children":[{"content":"<pre data-lines=\"1471,1483\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.card-container</span> {\n  <span class=\"hljs-attribute\">container-type</span>: inline-size;\n}\n\n<span class=\"hljs-keyword\">@container</span> (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">400px</span>) {\n  <span class=\"hljs-selector-class\">.card</span> {\n    <span class=\"hljs-attribute\">display</span>: grid;\n    <span class=\"hljs-attribute\">grid-template-columns</span>: <span class=\"hljs-number\">200px</span> <span class=\"hljs-number\">1</span>fr;\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1471,1483"}}],"payload":{"tag":"h4","lines":"1470,1471"}},{"content":"&#x81ea;&#x9002;&#x5e94;&#x5bfc;&#x822a;","children":[{"content":"<pre data-lines=\"1485,1496\"><code class=\"language-css\"><span class=\"hljs-selector-class\">.nav-container</span> {\n  <span class=\"hljs-attribute\">container-type</span>: inline-size;\n}\n\n<span class=\"hljs-keyword\">@container</span> (<span class=\"hljs-attribute\">min-width</span>: <span class=\"hljs-number\">600px</span>) {\n  <span class=\"hljs-selector-class\">.nav</span> {\n    <span class=\"hljs-attribute\">flex-direction</span>: row;\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1485,1496"}}],"payload":{"tag":"h4","lines":"1484,1485"}}],"payload":{"tag":"h3","lines":"1469,1470"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"1. &#x4e3a;&#x5bb9;&#x5668;&#x8bbe;&#x7f6e;&#x660e;&#x786e;&#x7684;&#x5c3a;&#x5bf8;","children":[],"payload":{"tag":"li","lines":"1498,1499","listIndex":1}},{"content":"2. &#x7ed3;&#x5408;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x4f7f;&#x7528;","children":[],"payload":{"tag":"li","lines":"1499,1500","listIndex":2}},{"content":"3. &#x4f7f;&#x7528;&#x6709;&#x610f;&#x4e49;&#x7684;&#x5bb9;&#x5668;&#x540d;&#x79f0;","children":[],"payload":{"tag":"li","lines":"1500,1501","listIndex":3}},{"content":"4. &#x907f;&#x514d;&#x8fc7;&#x5ea6;&#x5d4c;&#x5957;&#x5bb9;&#x5668;&#x67e5;&#x8be2;","children":[],"payload":{"tag":"li","lines":"1501,1502","listIndex":4}},{"content":"5. &#x6d4b;&#x8bd5;&#x4e0d;&#x540c;&#x5bb9;&#x5668;&#x5c3a;&#x5bf8;&#x4e0b;&#x7684;&#x8868;&#x73b0;","children":[],"payload":{"tag":"li","lines":"1502,1504","listIndex":5}}],"payload":{"tag":"h3","lines":"1497,1498"}}],"payload":{"tag":"h2","lines":"1422,1423"}},{"content":"CSS&#x5c42;&#x53e0;&#x5c42;(@layer)","children":[{"content":"&#x57fa;&#x7840;&#x6982;&#x5ff5;","children":[{"content":"&#x63a7;&#x5236;CSS&#x89c4;&#x5219;&#x7684;&#x5c42;&#x53e0;&#x987a;&#x5e8f;","children":[],"payload":{"tag":"li","lines":"1507,1508"}},{"content":"&#x89e3;&#x51b3;&#x7279;&#x5f02;&#x6027;&#x51b2;&#x7a81;&#x7684;&#x4f18;&#x96c5;&#x65b9;&#x6848;","children":[],"payload":{"tag":"li","lines":"1508,1509"}},{"content":"&#x63d0;&#x9ad8;&#x6837;&#x5f0f;&#x8868;&#x7684;&#x53ef;&#x7ef4;&#x62a4;&#x6027;","children":[],"payload":{"tag":"li","lines":"1509,1511"}}],"payload":{"tag":"h3","lines":"1506,1507"}},{"content":"&#x5b9a;&#x4e49;&#x5c42;","children":[{"content":"<pre data-lines=\"1512,1528\"><code class=\"language-css\"><span class=\"hljs-keyword\">@layer</span> base, components, utilities;\n\n<span class=\"hljs-comment\">/* &#x6309;&#x987a;&#x5e8f;&#x5b9a;&#x4e49;&#x5c42; */</span>\n<span class=\"hljs-keyword\">@layer</span> base {\n  <span class=\"hljs-comment\">/* &#x57fa;&#x7840;&#x6837;&#x5f0f; */</span>\n}\n\n<span class=\"hljs-keyword\">@layer</span> components {\n  <span class=\"hljs-comment\">/* &#x7ec4;&#x4ef6;&#x6837;&#x5f0f; */</span>\n}\n\n<span class=\"hljs-keyword\">@layer</span> utilities {\n  <span class=\"hljs-comment\">/* &#x5de5;&#x5177;&#x7c7b; */</span>\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1512,1528"}}],"payload":{"tag":"h3","lines":"1511,1512"}},{"content":"&#x5c42;&#x53e0;&#x987a;&#x5e8f;","children":[{"content":"&#x540e;&#x5b9a;&#x4e49;&#x7684;&#x5c42;&#x4f18;&#x5148;&#x7ea7;&#x9ad8;&#x4e8e;&#x5148;&#x5b9a;&#x4e49;&#x7684;&#x5c42;","children":[],"payload":{"tag":"li","lines":"1530,1531"}},{"content":"&#x672a;&#x5206;&#x5c42;&#x7684;&#x6837;&#x5f0f;&#x4f18;&#x5148;&#x7ea7;&#x9ad8;&#x4e8e;&#x5206;&#x5c42;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"1531,1532"}},{"content":"&#x5c42;&#x5185;&#x89c4;&#x5219;&#x4ecd;&#x9075;&#x5faa;&#x7279;&#x5f02;&#x6027;&#x89c4;&#x5219;","children":[],"payload":{"tag":"li","lines":"1532,1534"}}],"payload":{"tag":"h3","lines":"1529,1530"}},{"content":"&#x5bfc;&#x5165;&#x5c42;","children":[{"content":"<pre data-lines=\"1535,1538\"><code class=\"language-css\"><span class=\"hljs-keyword\">@import</span> url(base.css) layer(base);\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1535,1538"}}],"payload":{"tag":"h3","lines":"1534,1535"}},{"content":"&#x5b9e;&#x7528;&#x793a;&#x4f8b;","children":[{"content":"&#x7ec4;&#x7ec7;&#x6837;&#x5f0f;","children":[{"content":"<pre data-lines=\"1541,1556\"><code class=\"language-css\"><span class=\"hljs-keyword\">@layer</span> reset, base, components, utilities;\n\n<span class=\"hljs-keyword\">@layer</span> reset {\n  * { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">0</span>; <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">0</span>; }\n}\n\n<span class=\"hljs-keyword\">@layer</span> base {\n  <span class=\"hljs-selector-tag\">body</span> { <span class=\"hljs-attribute\">font-family</span>: sans-serif; }\n}\n\n<span class=\"hljs-keyword\">@layer</span> components {\n  <span class=\"hljs-selector-class\">.button</span> { <span class=\"hljs-comment\">/* &#x6309;&#x94ae;&#x6837;&#x5f0f; */</span> }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1541,1556"}}],"payload":{"tag":"h4","lines":"1540,1541"}},{"content":"&#x8986;&#x76d6;&#x7b2c;&#x4e09;&#x65b9;&#x6837;&#x5f0f;","children":[{"content":"<pre data-lines=\"1558,1570\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x7b2c;&#x4e09;&#x65b9;&#x5e93; */</span>\n<span class=\"hljs-keyword\">@import</span> url(bootstrap.css) layer(vendor);\n\n<span class=\"hljs-comment\">/* &#x81ea;&#x5b9a;&#x4e49;&#x6837;&#x5f0f;&#x5c42; */</span>\n<span class=\"hljs-keyword\">@layer</span> custom {\n  <span class=\"hljs-comment\">/* &#x8986;&#x76d6;bootstrap&#x6837;&#x5f0f; */</span>\n  <span class=\"hljs-selector-class\">.btn</span> {\n    <span class=\"hljs-attribute\">background</span>: <span class=\"hljs-built_in\">var</span>(--primary-color);\n  }\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1558,1570"}}],"payload":{"tag":"h4","lines":"1557,1558"}}],"payload":{"tag":"h3","lines":"1539,1540"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"1. &#x660e;&#x786e;&#x5b9a;&#x4e49;&#x5c42;&#x987a;&#x5e8f;","children":[],"payload":{"tag":"li","lines":"1572,1573","listIndex":1}},{"content":"2. &#x5c06;&#x7b2c;&#x4e09;&#x65b9;&#x6837;&#x5f0f;&#x653e;&#x5165;&#x5355;&#x72ec;&#x5c42;","children":[],"payload":{"tag":"li","lines":"1573,1574","listIndex":2}},{"content":"3. &#x4f7f;&#x7528;&#x5c42;&#x7ec4;&#x7ec7;&#x5927;&#x578b;&#x9879;&#x76ee;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"1574,1575","listIndex":3}},{"content":"4. &#x907f;&#x514d;&#x8fc7;&#x5ea6;&#x5206;&#x5c42;","children":[],"payload":{"tag":"li","lines":"1575,1576","listIndex":4}},{"content":"5. &#x7ed3;&#x5408;CSS&#x53d8;&#x91cf;&#x4f7f;&#x7528;","children":[],"payload":{"tag":"li","lines":"1576,1578","listIndex":5}}],"payload":{"tag":"h3","lines":"1571,1572"}}],"payload":{"tag":"h2","lines":"1504,1505"}},{"content":"CSS&#x6027;&#x80fd;&#x4f18;&#x5316;","children":[{"content":"&#x9009;&#x62e9;&#x5668;&#x4f18;&#x5316;","children":[{"content":"&#x907f;&#x514d;&#x8fc7;&#x5ea6;&#x590d;&#x6742;&#x7684;&#x9009;&#x62e9;&#x5668;","children":[],"payload":{"tag":"li","lines":"1581,1582"}},{"content":"&#x51cf;&#x5c11;&#x540e;&#x4ee3;&#x9009;&#x62e9;&#x5668;&#x7684;&#x6df1;&#x5ea6;","children":[],"payload":{"tag":"li","lines":"1582,1583"}},{"content":"&#x4f7f;&#x7528;&#x7c7b;&#x9009;&#x62e9;&#x5668;&#x66ff;&#x4ee3;&#x6807;&#x7b7e;&#x9009;&#x62e9;&#x5668;","children":[],"payload":{"tag":"li","lines":"1583,1584"}},{"content":"&#x907f;&#x514d;&#x4f7f;&#x7528;&#x901a;&#x914d;&#x7b26;&#x9009;&#x62e9;&#x5668;","children":[],"payload":{"tag":"li","lines":"1584,1586"}}],"payload":{"tag":"h3","lines":"1580,1581"}},{"content":"&#x6e32;&#x67d3;&#x6027;&#x80fd;","children":[{"content":"&#x9ad8;&#x6027;&#x80fd;&#x5c5e;&#x6027;","children":[{"content":"transform","children":[],"payload":{"tag":"li","lines":"1588,1589"}},{"content":"opacity","children":[],"payload":{"tag":"li","lines":"1589,1590"}},{"content":"filter (&#x90e8;&#x5206;&#x6d4f;&#x89c8;&#x5668;)","children":[],"payload":{"tag":"li","lines":"1590,1592"}}],"payload":{"tag":"h4","lines":"1587,1588"}},{"content":"&#x4f4e;&#x6027;&#x80fd;&#x5c5e;&#x6027;","children":[{"content":"width/height","children":[],"payload":{"tag":"li","lines":"1593,1594"}},{"content":"margin/padding","children":[],"payload":{"tag":"li","lines":"1594,1595"}},{"content":"top/left&#x7b49;&#x5b9a;&#x4f4d;&#x5c5e;&#x6027;","children":[],"payload":{"tag":"li","lines":"1595,1597"}}],"payload":{"tag":"h4","lines":"1592,1593"}}],"payload":{"tag":"h3","lines":"1586,1587"}},{"content":"&#x51cf;&#x5c11;&#x91cd;&#x7ed8;&#x4e0e;&#x56de;&#x6d41;","children":[{"content":"&#x4f7f;&#x7528;transform&#x4ee3;&#x66ff;top/left&#x52a8;&#x753b;","children":[],"payload":{"tag":"li","lines":"1598,1599"}},{"content":"&#x4f7f;&#x7528;will-change&#x63d0;&#x793a;&#x6d4f;&#x89c8;&#x5668;","children":[],"payload":{"tag":"li","lines":"1599,1600"}},{"content":"&#x6279;&#x91cf;DOM&#x64cd;&#x4f5c;","children":[],"payload":{"tag":"li","lines":"1600,1601"}},{"content":"&#x907f;&#x514d;&#x9891;&#x7e41;&#x8bfb;&#x53d6;&#x5e03;&#x5c40;&#x5c5e;&#x6027;","children":[],"payload":{"tag":"li","lines":"1601,1603"}}],"payload":{"tag":"h3","lines":"1597,1598"}},{"content":"&#x8d44;&#x6e90;&#x4f18;&#x5316;","children":[{"content":"&#x538b;&#x7f29;CSS&#x6587;&#x4ef6;","children":[],"payload":{"tag":"li","lines":"1604,1605"}},{"content":"&#x4f7f;&#x7528;CSS&#x7cbe;&#x7075;&#x56fe;","children":[],"payload":{"tag":"li","lines":"1605,1606"}},{"content":"&#x5185;&#x8054;&#x5173;&#x952e;CSS","children":[],"payload":{"tag":"li","lines":"1606,1607"}},{"content":"&#x5f02;&#x6b65;&#x52a0;&#x8f7d;&#x975e;&#x5173;&#x952e;CSS","children":[],"payload":{"tag":"li","lines":"1607,1609"}}],"payload":{"tag":"h3","lines":"1603,1604"}},{"content":"&#x5de5;&#x5177;&#x7c7b;&#x5b9e;&#x8df5;","children":[{"content":"<pre data-lines=\"1610,1621\"><code class=\"language-css\"><span class=\"hljs-comment\">/* &#x539f;&#x5b50;&#x5316;CSS */</span>\n<span class=\"hljs-selector-class\">.m-1</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">0.25rem</span>; }\n<span class=\"hljs-selector-class\">.p-2</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">0.5rem</span>; }\n\n<span class=\"hljs-comment\">/* &#x5b9e;&#x7528;&#x4f18;&#x5148;CSS */</span>\n<span class=\"hljs-selector-class\">.container</span> {\n  <span class=\"hljs-attribute\">max-width</span>: <span class=\"hljs-number\">1200px</span>;\n  <span class=\"hljs-attribute\">margin-inline</span>: auto;\n}\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"1610,1621"}}],"payload":{"tag":"h3","lines":"1609,1610"}},{"content":"&#x73b0;&#x4ee3;CSS&#x7279;&#x6027;","children":[{"content":"&#x4f7f;&#x7528;CSS&#x53d8;&#x91cf;&#x51cf;&#x5c11;&#x91cd;&#x590d;","children":[],"payload":{"tag":"li","lines":"1623,1624"}},{"content":"&#x4f7f;&#x7528;Grid&#x548c;Flexbox&#x5e03;&#x5c40;","children":[],"payload":{"tag":"li","lines":"1624,1625"}},{"content":"&#x4f7f;&#x7528;&#x5bb9;&#x5668;&#x67e5;&#x8be2;&#x66ff;&#x4ee3;&#x90e8;&#x5206;&#x5a92;&#x4f53;&#x67e5;&#x8be2;","children":[],"payload":{"tag":"li","lines":"1625,1626"}},{"content":"&#x4f7f;&#x7528;&#x5c42;&#x53e0;&#x5c42;&#x7ec4;&#x7ec7;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"1626,1628"}}],"payload":{"tag":"h3","lines":"1622,1623"}},{"content":"&#x6700;&#x4f73;&#x5b9e;&#x8df5;","children":[{"content":"1. &#x6d4b;&#x91cf;&#x6027;&#x80fd;&#x6307;&#x6807;","children":[],"payload":{"tag":"li","lines":"1629,1630","listIndex":1}},{"content":"2. &#x4f18;&#x5316;&#x5173;&#x952e;&#x6e32;&#x67d3;&#x8def;&#x5f84;","children":[],"payload":{"tag":"li","lines":"1630,1631","listIndex":2}},{"content":"3. &#x4f7f;&#x7528;&#x5f00;&#x53d1;&#x8005;&#x5de5;&#x5177;&#x5206;&#x6790;","children":[],"payload":{"tag":"li","lines":"1631,1632","listIndex":3}},{"content":"4. &#x6e10;&#x8fdb;&#x589e;&#x5f3a;&#x8bbe;&#x8ba1;","children":[],"payload":{"tag":"li","lines":"1632,1633","listIndex":4}},{"content":"5. &#x6d4b;&#x8bd5;&#x4e0d;&#x540c;&#x8bbe;&#x5907;&#x6027;&#x80fd;","children":[],"payload":{"tag":"li","lines":"1633,1635","listIndex":5}}],"payload":{"tag":"h3","lines":"1628,1629"}},{"content":"&#x6027;&#x80fd;&#x68c0;&#x67e5;&#x6e05;&#x5355;","children":[{"content":"<svg width=\"16\" height=\"16\" viewBox=\"0 -3 24 24\"><path fill-rule=\"evenodd\" d=\"M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5z\" clip-rule=\"evenodd\"/></svg> &#x538b;&#x7f29;CSS&#x6587;&#x4ef6;","children":[],"payload":{"tag":"li","lines":"1636,1637"}},{"content":"<svg width=\"16\" height=\"16\" viewBox=\"0 -3 24 24\"><path fill-rule=\"evenodd\" d=\"M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5z\" clip-rule=\"evenodd\"/></svg> &#x51cf;&#x5c11;&#x4e0d;&#x5fc5;&#x8981;&#x7684;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"1637,1638"}},{"content":"<svg width=\"16\" height=\"16\" viewBox=\"0 -3 24 24\"><path fill-rule=\"evenodd\" d=\"M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5z\" clip-rule=\"evenodd\"/></svg> &#x4f18;&#x5316;&#x9009;&#x62e9;&#x5668;","children":[],"payload":{"tag":"li","lines":"1638,1639"}},{"content":"<svg width=\"16\" height=\"16\" viewBox=\"0 -3 24 24\"><path fill-rule=\"evenodd\" d=\"M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5z\" clip-rule=\"evenodd\"/></svg> &#x4f7f;&#x7528;&#x9ad8;&#x6548;&#x52a8;&#x753b;&#x5c5e;&#x6027;","children":[],"payload":{"tag":"li","lines":"1639,1640"}},{"content":"<svg width=\"16\" height=\"16\" viewBox=\"0 -3 24 24\"><path fill-rule=\"evenodd\" d=\"M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5z\" clip-rule=\"evenodd\"/></svg> &#x51cf;&#x5c11;&#x5e03;&#x5c40;&#x6296;&#x52a8;","children":[],"payload":{"tag":"li","lines":"1640,1641"}},{"content":"<svg width=\"16\" height=\"16\" viewBox=\"0 -3 24 24\"><path fill-rule=\"evenodd\" d=\"M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5z\" clip-rule=\"evenodd\"/></svg> &#x6d4b;&#x8bd5;&#x79fb;&#x52a8;&#x8bbe;&#x5907;&#x6027;&#x80fd;","children":[],"payload":{"tag":"li","lines":"1641,1646"}}],"payload":{"tag":"h3","lines":"1635,1636"}}],"payload":{"tag":"h2","lines":"1578,1579"}}],"payload":{"tag":"h1","lines":"0,1"}},{})</script>
</body>
</html>
